Erstellen von popup-Boxen, die mit html, css und javascript

grundsätzlich bin ich versucht, zu erstellen Sie mehrere popup-Boxen, die erscheinen, wenn Sie die verschiedenen links angeklickt werden. Für einige Grund, ein popup-Fenster erscheint nur, wenn Sie den ersten link angeklickt wird. Wenn der rest der links geklickt wird, passiert nichts. Jede Hilfe ist willkommen, danke. Außerdem habe ich nur 2 der links in diesem Beispiel.

javascript-code:

function xpopup() {
        document.getElementById("x").onclick= function(){
            var overlay = document.getElementById("overLay");
            var popup = document.getElementById("xPopup");
            overlay.style.display = "block";
            popup.style.display = "block";
        }
    }

    function ypopup() {
        document.getElementById("y").onclick= function(){
            var overlay = document.getElementById("overLay");
            var popup = document.getElementById("yPopup");
            overlay.style.display = "block";
            popup1.style.display = "block";
        }
    }
    </script>

HTML-code:

 <body onLoad="xpopup()"; "ypopup()";>
 <div id="overLay"></div>

<div class="popupBox" id="xPopup"></div>
<div class="popupBox" id="yPopup"></div>

<a href="#" class="listAttractions" id="x">Link 1</a><br>
<a href="#" class="listAttractions" id="y">Link 2</a><br>

CSS-code:

.popupBox{
display:none;
position: fixed;
width: 30%;
height: 40%;
margin-left: 16.5%; 
margin-top: 4.5%;
background-color: white;
border: 2px solid black;
border-radius: 10px;
z-index: 10;
}

#overLay{
display:none;
position: fixed;
width: 100%;
height: 100%;
background-color: #707070;
opacity: 0.7; 
z-index: 9;
left: 0;
top: 0;
}
InformationsquelleAutor Zaq Mughal | 2014-11-12
  1. 0

    Ersetzen <body onLoad="xpopup()"; "ypopup()";> mit <body onLoad="xpopup(); ypopup();"> und in Ihren JavaScript-code Sie haben einen Tippfehler.

    function ypopup() {
    document.getElementById("y").onclick= function(){
        var overlay = document.getElementById("overLay");
        var popup = document.getElementById("yPopup");
        overlay.style.display = "block";
        popup1.style.display = "block";    //Here the popup1 is undefined change it to popup.style.....
    }
}

    Edit :-->

    Ich geändert habe, Ihren code zu verbergen das popup, wenn man auf das ausgegraute Bereich.

    Fiddle

    HTML:

    <body>
    <div id="overLay"></div>
    <div class="popupBox" id="xPopup"></div>
    <div class="popupBox" id="yPopup"></div>
<a href="#" class="listAttractions" id="x">Link 1</a>
    <br />
<a href="#" class="listAttractions" id="y">Link 2</a>
    <br />
</body>

    JavaScript:

    var overlay = document.getElementById("overLay");
var xpopup = document.getElementById("xPopup");
var ypopup = document.getElementById("yPopup");

document.getElementById("x").onclick = function () {
    overlay.style.display = "block";
    xpopup.style.display = "block";
};
document.getElementById("y").onclick = function () {
    overlay.style.display = "block";
    ypopup.style.display = "block";
};
overlay.onclick = function () {
    overlay.style.display = "none";
    xpopup.style.display = "none";
    ypopup.style.display = "none";
};
    • Ich danke Ihnen so viel Sie absolute don!
    • Überprüfen Sie heraus meine bearbeitete Antwort. Dies ist, wie ich es tun würde.
    • Ja, ich erkannte nach, dass die änderung in den globalen Variablen wäre besser. Wo haben Sie mit dem 'overlay.onclick = Funktion () {........' bedeutet das, dass, wenn der Benutzer klickt auf eine beliebige Stelle außerhalb des popup-box, die pop-up-Fenster schließt?
    • Ja genau.
    • Habe es, was ich getan habe, ist Hinzugefügt eine HTML-schließen-symbol rechts oben auf mein popup als popup ein Formular enthält, und ich will nicht, dass der Benutzer immer die Hälfte Weg durch die form und versehentlich schließen Sie das popup, indem Sie außerhalb der box.
    • Wenn meine Antwort Ihnen geholfen kannst du bitte meine Antwort als akzeptiert durch Klick auf das Häkchen unterhalb der Pfeile nach oben und unten neben dem Antwort und geben Sie mir ein upvote?
    • Alles fertig, aber nicht über 15 " Ruf " so nicht geben kann upvote.

    InformationsquelleAutor Weafs.py
  2. 0

    Ich sehe zwei Probleme --

    Die erste ist schon beantwortet chipChocolate.py:

    Ersetzen <body onLoad="xpopup()"; "ypopup()";> mit <body onLoad="xpopup(); ypopup();">.

    Den zweiten (und vielleicht ist das nur ein Tippfehler?) ist, dass Sie haben:

    function ypopup() {
  document.getElementById("y").onclick= function()
    var overlay = document.getElementById("overLay");
    var popup = document.getElementById("yPopup");
    overlay.style.display = "block";
    popup1.style.display = "block";
  }
}

    Sie verweisen popup1 aber Sie haben Ihren Namen variable popup. Wenn Sie öffnen Sie die javascript-Konsole, die Sie vermutlich feststellen, dass das auslösen eines Fehlers. Benennen Sie die variable popup1 und das sollte funktionieren.

    • Ja, lästige kleine Tippfehler, danke für spotting Kumpel.
    InformationsquelleAutor SataGNUk
Schreibe einen Kommentar