0

サイトに 1 つのポップアップを含めることができますが、2 つ目を追加したい場合、これは正しく機能しません。

それぞれに個別のポップアップがある 2 つのボタンを探しています。

Jsfiddleを確認し、ここでプラグインの公式サイトを確認してください

これの何が問題なのですか？

Jクエリ

(function ($) {
     $(function () {
          $('#my-button,#my-button2').bind('click', function (e) {
               e.preventDefault();
               $('#element_to_pop_up,#element_to_pop_up2').bPopup();
           });
       });
 })(jQuery);

CSS

#element_to_pop_up {
   background-color:#fff;
   border-radius:15px;
   color:#000;
   display:none;
   padding:20px;
   min-width:400px;
   min-height: 180px;
}

.b-close {
   cursor:pointer;
   position:absolute;
   right:10px;
   top:5px;
};

#element_to_pop_up2 {
background-color: black;
border-radius:15px;
color:#000;
display:none;
padding:20px;
min-width:400px;
min-height: 180px;

}

HTML

<button id="my-button">POP IT UP</button>
<div id="element_to_pop_up"> <a class="b-close">x<a/>
Content of popup
</div>

<button id="my-button">POP IT UP</button>
<div id="element_to_pop_up2"> <a class="b-close">x<a/>
Content of popup
</div>
4

3 に答える 3

3

ええと..これがあなたが望むもののようです。

<button id="my-button" class="popBtn" data-toggle-pop="element_to_pop_up">POP IT UP</button>
<div id="element_to_pop_up"> <a class="b-close">x<a/>
Content of popup
</div>

<button id="my-button2" class="popBtn" data-toggle-pop="element_to_pop_up2">POP IT UP</button> <!-- You put my-button in your code -->
<div id="element_to_pop_up2"> <a class="b-close">x<a/>
Content of popup
</div>

JS:

jQuery(document).ready(function($) {
    $('.popBtn').click(function() {
        var target = $(this).attr('data-toggle-pop');
        $('#' + target).bPopup();
    });
});

フィドル: http://jsfiddle.net/HSCwC/

于 2013-09-19T10:35:04.300 に答える
0

これを試して

 $('#my-button').bind('click', function (e) {

            e.preventDefault();

            $('#element_to_pop_up1').bPopup();
            $('#element_to_pop_up2').bPopup();

 });

JSFIDDLE

于 2013-09-19T10:13:41.927 に答える