simple PopUp-Fenster

Um ein PopUp Fenster zu erzeugen, auf ganz einfache Art und Weise, können wir wie folgt vorgehen. Den HTML Code im Body-Bereich deiner Seite einfügen und nach belieben anpassen. Den Java-Script Code in den Head-Bereich einfügen und die URL anpassen. Schon könnt ihr per Javascript ein Popup-Fenster öffnen!

HTML Code


<a href="#" onclick="winopen()">Popup öffnen</a>

Javascript


function winopen()
 {
 // Die Größe des Fensters
 var popUpSizeX=700;
 var popUpSizeY=500;

 // Die Position des Fensters
 var popUpLocationX=50;
 var popUpLocationY=50;

 // URL zum Fenster
 var popUpURL="https://sourcecodeblogger.wordpress.com";

 splashWin = window.open("",'x','fullscreen=1,toolbar=0,location=0, directories=0,status=0,menubar=0,scrollbars=no,resizable=0');

 splashWin.blur();
 window.focus();

 splashWin.resizeTo(popUpSizeX,popUpSizeY);
 splashWin.moveTo(popUpLocationX,popUpLocationY);
 splashWin.location=popUpURL;
 splashWin.focus();
 }

komplettes Beispiel


<!DOCTYPE html>
<html lang="de">
<head>
<!-------------------PopUp Fenster öffnen-------ganz einfaches Beispiel------------------->
<script type="text/javascript" charset="utf-8">
 function winopen()
 {
 // Die Größe des Fensters
 var popUpSizeX=700;
 var popUpSizeY=500;

 // Die Position des Fensters
 var popUpLocationX=50;
 var popUpLocationY=50;

 // URL zum Fenster
 var popUpURL="https://sourcecodeblogger.wordpress.com";

 splashWin = window.open("",'x','fullscreen=1,toolbar=0,location=0, directories=0,status=0,menubar=0,scrollbars=no,resizable=0');

 splashWin.blur();
 window.focus();

 splashWin.resizeTo(popUpSizeX,popUpSizeY);
 splashWin.moveTo(popUpLocationX,popUpLocationY);
 splashWin.location=popUpURL;
 splashWin.focus();
 }
</script>

</head>
<body>
​

<!-------------------PopUp Fenster öffnen-------------------------->
 <a href="#" onclick="winopen()">Popup öffnen</a>

</body>
</html>

Beispiel online

Advertisements

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s