Question

我可以在我的网站中添加一个弹出窗口，但是当我想要添加第二个弹出窗口时，这不能正常工作。

我正在寻找两个按钮，每个按钮都有单独的弹出窗口。

这有什么问题？

JQUERY

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

Answer 1

呃..好像这就是你想要的。

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

Answer 2

您没有以良好的方式使用代码。

我只是为了方便而改变。

<button class="my-button" data-rel="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 class="my-button" data-rel="element_to_pop_up2">POP IT UP</button>
<div id="element_to_pop_up2" >
    <a class="b-close">x<a/>
    Content of popup2
</div>

我添加了 class和data-rel 属性。

(function ($) {

        $('.my-button').bind('click', function (e) {
            e.preventDefault();
            var result_div = $(this).data('rel')
            $('#'+result_div).bPopup();
        });


})(jQuery);

Answer 3

试试这个

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

            e.preventDefault();

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

 });

JSFIDDLE

两个弹出窗口无法正常工作

3 个答案: