Два всплывающих окна не работают должным образом

Question

Два всплывающих окна не работают должным образом

0

Я могу включить одно всплывающее окно на свой сайт, но когда я хочу добавить второй, это не работает должным образом.

Я ищу две кнопки с отдельным всплывающим окном для каждого.

проверьте Jsfiddle и здесь плагин на сайте

Что с этим не так?

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>

Gorthard 19 сен. 2013, в 11:58

Источник

Теги:

jquery

html

css

3 ответа

3

Вы не используете код с хорошим способом.

Я просто изменяю для легкого пути.

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

Parag Kuhikar 19 сен. 2013, в 09:24

0

Попробуй это

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

            e.preventDefault();

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

 });

JSFIDDLE

DDK 19 сен. 2013, в 08:12

0

Это работает, но я хочу две кнопки и два всплывающих окна
Gorthard 19 сен. 2013, в 10:21

Ещё вопросы

Это работает, но я хочу две кнопки и два всплывающих окна

JofryHS · Accepted Answer · 2013-09-19T07-38-00.000Z

Кажется, это то, чего вы хотите.

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