Я могу включить одно всплывающее окно на свой сайт, но когда я хочу добавить второй, это не работает должным образом.
Я ищу две кнопки с отдельным всплывающим окном для каждого.
проверьте 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>
Кажется, это то, чего вы хотите.
<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/
Вы не используете код с хорошим способом.
Я просто изменяю для легкого пути.
<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);
Попробуй это
$('#my-button').bind('click', function (e) {
e.preventDefault();
$('#element_to_pop_up1').bPopup();
$('#element_to_pop_up2').bPopup();
});