CODEWITHSUNDEEP
jqueryhtmlcss
Gorthard
Gorthard

Reputation: 71

Two popups dont work properly

I can include one popup into my site, but when I want to add second this don't work properly.

I'm looking for two buttons with individual popup for each,.

check Jsfiddle and here plugin offical site

What's wrong with this?

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>

Upvotes: 0

Views: 154

Answers (3)

Parag Kuhikar
Parag Kuhikar

Reputation: 485

You are not using code with good way.

I just change for easy way.

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

I added the class and data-rel attribute.

(function ($) {

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


})(jQuery);

Upvotes: 3

JofryHS
JofryHS

Reputation: 5874

Uh.. seems like this is what you want.

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

Fiddle: http://jsfiddle.net/HSCwC/

Upvotes: 3

DDK
DDK

Reputation: 1038

Try this 

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

            e.preventDefault();

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

 });

JSFIDDLE

Upvotes: 0

Related Questions