ボタンを含む複数のポップアップ

各ボタンがクリックされると個別に表示される複数のポップアップを作りたいと思います。ここでボタンを含む複数のポップアップ

は、私がこれまで

<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>

出典

2016-09-20 MLS

を開くためにどのようなことを伝えるために、ボタンにデータ属性を与えるSOへようこそ。 PICTURESコードの代わりにCODEを投稿してください！理由を調べるには[ヘルプ]をご覧ください。あなたの質問は何ですか？複数のポップアップがある場合は、IDの代わりにCLASSを使用する必要があります。 IDは一意である必要があります – mplungjan

ボタンにイベントハンドラを割り当てるためのjQueryを使用するときは、ループする必要はありません

をやったものです。それにクラスを与え、それが
ある場合、ボタンの数字を出してい

$(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>

出典

2016-09-20 08:50:15 mplungjan

ああ...ありがとうT^Tしかし、ポップアップボックスが閉じなかった;;;;;;;;; T^T実際には、JavaScriptとCSSを投稿しましたが、スクリーンショットを追加できるようにエラーがありました;;; – MLS

閉じるコードをクリックするとdivsがクローズされます – mplungjan

うわー!!!本当にありがとう~~それは働いています！ > _ MLS

ボタンを含む複数のポップアップ

答えて

関連する問題