popup ohne window.open

M

macropode

Erfahrenes Mitglied
Hallöchen.

Ich habe eine kleine frage.

Weis zufällig jemand wie man ein popup (die bekannten nervigen werbefenster) erstellen kann ohne window.open.


bitte helft mir!
 
Ja nen eigenes bauen mit DIV Elementen welche absolut positioniert werden und dann im HTML Body eingebunden werden.

Mit Grafiken kannst das Ding ja gestalten wie du dann möchtest.
 
So ein Grundgerüst zu bauen ist eine relativ einfache Geschichte , aber das kann dann auch nicht viel mehr als einfach da zu sein zum Beispiel.

Je mehr Funktionalität du brauchst desto mehr Code wird es am Ende natürlich , auch die ganzen Fenster Aktionen müsstest noch programmieren.

Stark vereinfacht sieht das am Ende so aus

Code: 
<html>
    <head>
        <style type="text/css">
            .popup_window {
                height:398px;
                width:398px;
                border:1px solid;
                position:absolute;
                z-index:10000;
            }
            
            .popup_head {
                height:20px;
                background:#f00;
            }
            
            .popup_body {
                height:358px
                background:#0f0;
            }
            
            .popup_foot {
                height:20px;
                background:#00f;
            }
        </style>
        <script type="text/javascript">
            function createPopUp() {
                
                var popup = document.createElement("div");
                var head = document.createElement("div");
                var body = document.createElement("div");
                var foot = document.createElement("div");
                
                popup.className = "popup_window";
                head.className = "popup_head";
                body.className = "popup_body";
                foot.className = "popup_foot";
                
                popup.appendChild(head);
                popup.appendChild(body);
                popup.appendChild(foot);
                
                document.getElementsByTagName("body")[0].appendChild(popup);
            }
        
            window.onload = function(){
                createPopUp();
            }
        </script>
    </head>
    <body>
    </body>
</html>
 
Zuletzt bearbeitet:
Hi,

das funktioniert dann so:
Javascript: 
            function createPopUp() {

                var popup = document.createElement("div");
                var head = document.createElement("div");
                var body = document.createElement("div");
                var foot = document.createElement("div");

                popup.className = "popup_window";
                head.className = "popup_head";
                body.className = "popup_body";
                foot.className = "popup_foot";

                popup.appendChild(head);
                popup.appendChild(body);
                popup.appendChild(foot);

                document.getElementsByTagName("body")[0].appendChild(popup);
            }

            //window.onload = function(){ // entfällt
                //createPopUp();
            //}
HTML: 
    <body>
      <a href="#" onclick="createPopUp();">createPopUp</a>
    </body>


mfg Maik
 
vielen Dank. und mit


onclick="closePopUp();"

oder so ähnlich^^
müsste es dann wieder zu schliesen sein?


uhi ist das peinlich!^^

aber ich habe noch eine frage.

Wie kann ich jetzt in das popup schreiben?


vielen dank im vorraus!
 
Na dann können wir schon langsam anfangen eine eigene Popup Klasse zu bauen damit nicht wild überall Funktionen rumliegen.

das Script

Code: 
var PopUp = (function(){

    var popup_win = null;

    var popup = null;
    var head  = null
    var body  = null;
    var foot  = null;
        
    function createPopUp() {
        
        popup = document.createElement("div");
        head = document.createElement("div");
        body = document.createElement("div");
        foot = document.createElement("div");
    
        popup.className = "popup_window";
        head.className = "popup_head";
        body.className = "popup_body";
        foot.className = "popup_foot";
         
        popup.appendChild(head);
        popup.appendChild(body);
        popup.appendChild(foot);
                             
        document.getElementsByTagName("body")[0].appendChild(popup);
        
        return popup;
    };
    
    return {
        addContent:function(content){
            if(!popup_win)
                popup_win = createPopUp();
                
            body.innerHTML = content;
            
            return this;
        },
        display:function(){
            
            if(!popup_win) 
                popup_win = createPopUp();
                
            popup_win.style.display = "block";
            
        },
        hide:function(){
            if(popup_win)
                popup_win.style.display = "none";
        }
    }; 
})();

HTML: 
    <a href="#" onClick="PopUp.addContent('Tutorials.de').display();return false;">zeige</a>
    <a href="#" onClick="PopUp.hide(); return false;">verstecke</a>
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück