✔ Rahmenloses POPUP

[PhoenixDH]

Hallo, ich würde gerne ein POPUP gestallten, das so aufgebaut ist wie dieses hier: hier

Kann mir jemand sagen wie ich sowas gestallte ?

 

[con-f-use]

Das ist einfach ein Layer, der per x-index über alles andere gelegt wird und bei Klick auf den "Schließen"-Button einfach nur ausgeblendet wird ( OBJEKT.style.visibility = 'hidden' bzw. OBJEKT.style.display = 'none').

 

[PhoenixDH]

Gibts da irgendwo ein Script dazu ?

 

[con-f-use]

Du wirst grad noch selbst einen div-layer in html schreiben können, ihm einen z-index per css zuweisen, ihm eine id geben, einen schließen-Button mit onclick="document.getElementById('id').style.display='none'" einfügen und dann glücklich mit deinem PopUp sein können.

Ansonsten schau dir einfach den Quelltext von dem Link an, den du gepostet hast.

 

[PhoenixDH]

Wenn ichs könnte würd ich net fragen, hab von Javascript leider nicht so viel Ahnung !

 

[Sven Mintel]

Webmaster-Faqs

 

[PhoenixDH]

So, ich habe ein fertiges Script gefunden, das genau das ist was ich gesucht habe !
Aber ein Problem hab ich noch, das Fenster soll in der Mitte des Bildschirms ausgegeben werden, dazu hab ich auch einen Code:

		b = \"300\"; //Breite Fenster
		h = \"100\"; //Höhe Fenster

		var ns6 = (!document.all && document.getElementById);
		var ie4 = (document.all);
		var ns4 = (document.layers);

		if(ns6||ns4) 
		{
		sbreite = innerWidth;
		shoehe = innerHeight;
		}
		else if(ie4) 
		{
		sbreite = document.body.clientWidth;
		shoehe = document.body.clientHeight;
		}
		x = (sbreite-b)/2;
		y = (shoehe-h)/2;

Das würd ich gerne in das Script einfügen:

<script language="JavaScript1.2">
	//Popup Box- By Jim Silver @ jimsilver47@yahoo.com

	var ns4=document.layers
	var ie4=document.all
	var ns6=document.getElementById&&!document.all

	//drag drop function for NS 4////
	/////////////////////////////////

	var dragswitch=0
	var nsx
	var nsy
	var nstemp

	function drag_dropns(name){
	if (!ns4)
	return
	temp=eval(name)
	temp.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP)
	temp.onmousedown=gons
	temp.onmousemove=dragns
	temp.onmouseup=stopns
	}

	function gons(e){
	temp.captureEvents(Event.MOUSEMOVE)
	nsx=e.x
	nsy=e.y
	}
	function dragns(e){
	if (dragswitch==1){
	temp.moveBy(e.x-nsx,e.y-nsy)
	return false
	}
	}

	function stopns(){
	temp.releaseEvents(Event.MOUSEMOVE)
	}

	//drag drop function for ie4+ and NS6////
	/////////////////////////////////


	function drag_drop(e){
	if (ie4&&dragapproved){
	crossobj.style.left=tempx+event.clientX-offsetx
	crossobj.style.top=tempy+event.clientY-offsety
	return false
	}
	else if (ns6&&dragapproved){
	crossobj.style.left=tempx+e.clientX-offsetx
	crossobj.style.top=tempy+e.clientY-offsety
	return false
	}
	}

	function initializedrag(e){
	crossobj=ns6? document.getElementById("showimage") : document.all.showimage

	var firedobj=ns6? e.target : event.srcElement
	var topelement=ns6? "HTML" : "BODY"

	while (firedobj.tagName!=topelement&&firedobj.id!="dragbar"){
	firedobj=ns6? firedobj.parentNode : firedobj.parentElement
	}

	if (firedobj.id=="dragbar"){
	offsetx=ie4? event.clientX : e.clientX
	offsety=ie4? event.clientY : e.clientY

	tempx=parseInt(crossobj.style.left)
	tempy=parseInt(crossobj.style.top)

	dragapproved=true
	document.onmousemove=drag_drop
	}
	}
	document.onmousedown=initializedrag
	document.onmouseup=new Function("dragapproved=false")

	////drag drop functions end here//////

	function hidebox(){
	if (ie4||ns6)
	crossobj.style.visibility="hidden"
	else if (ns4)
	document.showimage.visibility="hide"
	}

	</script>

	<div id="showimage" style="position:absolute;width:250px;left:250;top:250">

	<table border="0" width="300" cellspacing="1" cellpadding="3">
  	 <tr class="color4">
    	  <td width="100%">
	       <table border="0" width="100%" cellspacing="0" cellpadding="0" height="40">
      		<tr>
        	 <td id="dragbar" style="cursor:hand" width="100%"><ilayer width="100%" onSelectStart="return false"><layer width="100%" onMouseover="dragswitch=1;if (ns4) drag_dropns(showimage)" onMouseout="dragswitch=0">'.$style[smallfont].'<font color="'.$style[col_he_fo_font].'"><strong>Tipps & Tricks</strong></font>'.$style[smallfontend].'</layer></ilayer>
		 </td>
        	 <td style="cursor:hand" valign="middle"><a href="#" onClick="hidebox();return false">'.$style[smallfont].'<font color="'.$style[col_he_fo_font].'"><strong>x</strong></font>'.$style[smallfontend].'</a>
		 </td>
      	 	</tr>
      	 	<tr>
          	  <td width="100%" bgcolor="'.$style[CellA].'" style="padding:4px" colspan="2">

			<!-- Inhalt ---->

			'.$style[smallfont].'<b>Wusstest du schon dass ...</b><br><br>Test'.$style[smallfontend].'

			<!-- Inhalt----->

	  	  </td>
         	 </tr>
    		</table>
    		</td>
  		</tr>
	</table>
	</div>';

WIe bekomme ich das da rein ? das an der Stelle die Postionen stehen mittig ?

<div id="showimage" style="position:absolute;width:250px;left:250;top:250">

Danke für eure Hilfe !