Mehrere Popups mit Schaltflächen

Ich möchte mehrere Popups erstellen, die einzeln angezeigt werden, wenn jeder Button klickt.Mehrere Popups mit Schaltflächen

Hier ist, was ich getan habe bisher

Javascript

<body> 
 
<button id="popup_btn" class="popup_btn" type="button"> Hi </button> \t \t \t 
 
\t \t \t  \t \t \t 
 
<div id="popup" class="popup_wrap"> 
 
    <div class="popup_content"> 
 
    <p> Hi</p> 
 
    <button id="popup_close" class="close"> close </button> 
 
    </div> 
 
</div> 
 

 
<button id="popup_btn" class="popup_btn" type="button"> History </button> \t \t \t 
 
\t \t \t  \t \t \t 
 
<div id="popup" class="popup_wrap"> 
 
    <div class="popup_content"> 
 
    <p> Hi</p> 
 
    <button id="popup_close" class="close"> close </button> 
 
    </div> 
 
</div> 
 

 
<button id="popup_btn" class="popup_btn" type="button"> Skill </button> \t \t \t 
 
\t \t \t  \t \t \t 
 
<div id="popup" class="popup_wrap"> 
 
    <div class="popup_content"> 
 
    <p> Hi</p> 
 
    <button id="popup_close" class="close"> close </button> 
 
    </div> 
 
</div> 
 
</body>

Quelle

2016-09-20 MLS

Willkommen zu öffnen, um SO. Bitte poste CODE anstelle von BILDERN Code! Besuchen Sie die [Hilfe], um zu sehen, warum. Auch was ist deine Frage? Sie müssen CLASS anstelle von ID verwenden, wenn mehrere Popups dasselbe tun. IDs müssen eindeutig sein – mplungjan

Sie brauchen nicht zu Schleife, wenn jQuery Event-Handler auf eine Taste zuweisen. Geben Sie eine Klasse ihm und haben die Taste herauszufinden, wo es ist
den Tasten ein Datenattribut gibt ihm zu sagen, was

$(function() { 
 
    $(".popup_btn").on("click",function() { 
 
    $("#"+$(this).data("div")).toggle(); 
 
    }); 
 
    $(".popup_close").on("click",function() { 
 
    $(this).closest("div.popup_wrap").hide(); 
 
    }); 
 
    
 
});

.popup_wrap { 
 
    display: none 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 

 
<body> 
 
    <button data-div="popup1" id="popup_btn1" class="popup_btn" type="button">Hi</button> 
 

 
    <div id="popup1" class="popup_wrap"> 
 
    <div class="popup_content"> 
 
     <p>Hi</p> 
 
     <button class="popup_close" class="close">close</button> 
 
    </div> 
 
    </div> 
 

 
    <button data-div="popup2" id="popup_btn2" class="popup_btn" type="button">History</button> 
 

 
    <div id="popup2" class="popup_wrap"> 
 
    <div class="popup_content"> 
 
     <p>Hi</p> 
 
     <button class="popup_close" class="close">close</button> 
 
    </div> 
 
    </div> 
 

 
    <button data-div="popup3" id="popup_btn3" class="popup_btn" type="button">Skill</button> 
 

 
    <div id="popup3" class="popup_wrap"> 
 
    <div class="popup_content"> 
 
     <p>Hi</p> 
 
     <button class="popup_close" class="close">close</button> 
 
    </div> 
 
    </div> 
 
</body>

Quelle

2016-09-20 08:50:15 mplungjan

Oh ... Danke T^T, aber die Popup-Box hat nicht geschlossen ;;;;;;;;;;; T^T Eigentlich habe ich Javascript und CSS gepostet, aber es gab einen Fehler, so dass ich Screenshot hinzufügen konnte ;;; – MLS

Der Code, den ich gepostet habe, schließt die Divs, wenn man auf "Schließen" klickt – mplungjan

Wow !!! Vielen Dank ~~ Es funktioniert !! > _ MLS

Mehrere Popups mit Schaltflächen

Antwort

Verwandte Themen