Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder tpeck's Avatar
    Join Date
    Oct 2002
    Location
    Sydney, Australia
    Posts
    882
    Thanks
    53
    Thanked 6 Times in 5 Posts

    jquery load new bpopup on popup close

    I'm using a popup plugin called bpopup which nicely loads a popup from a click on an image:

    Code:
    <input type="image" class="small pop1" src="http://www.codingforums.com/images/image1.png" width="30" height="20" data-bpopup="{&quot;transition&quot;:&quot;slideDown&quot;,&quot;speed&quot;:850,&quot;easing&quot;:&quot;easeOutBack&quot;}" />
    The class determines the type of popup from the library in the plugin. The data-bpopup further fashions the way the popup opens and closes.

    What I am looking for is a method to include a link within the bpopup which will close this popup and load a new one.

    I found the following code which offers a partial solution, but I am at a loss as to how to include it:

    Code:
        $('element_to_pop_up').bPopup({
            onOpen: function() { alert('onOpen fired'); }, 
            onClose: function() { alert('onClose fired'); }
        }, 
        function() {
            alert('Callback fired');
        });
    You see, I don't want the second popup to load onClose, but on a link - much like the link on the html page.

    Has anyone already achieved this?
    The difference between genius and stupidity is that genius has its limits. (Albert Einstein)

  • #2
    Regular Coder tpeck's Avatar
    Join Date
    Oct 2002
    Location
    Sydney, Australia
    Posts
    882
    Thanks
    53
    Thanked 6 Times in 5 Posts
    I'm edging closer to an answer to my problem with:

    Code:
    $(document).ready(function() {
    	$('#popup').bPopup({
            onClose: function() {
            $('#popup2').bPopup({
    	    easing: 'easeOutBack',
                speed: 850,
                transition: 'slideDown'
            });
            },
        });
    });

    The problem is I don't want the popup to appear on load, and I need the second popup to be invoked not by the close button. But at least it pops up.
    Last edited by tpeck; 08-05-2014 at 08:10 AM.
    The difference between genius and stupidity is that genius has its limits. (Albert Einstein)

  • #3
    Regular Coder tpeck's Avatar
    Join Date
    Oct 2002
    Location
    Sydney, Australia
    Posts
    882
    Thanks
    53
    Thanked 6 Times in 5 Posts
    When I click on the big button, it fires popup1.

    Shouldn't clicking on the link in the popup close it and open popup2?

    Code:
    $('.animage').on('b-close', function() {
    	alert("hello");
    	$('#popup2').bPopup({
    	easing: 'easeOutBack',
    	speed: 850,
    	transition: 'slideDown'
            	});
    });
    
    <div id="popup">
    pop me up #1
    </div>
    
    <div class="button">
    <input type="image" class="small pop1" src="images/image1.png" width="80" height="80" data-bpopup="{&quot;transition&quot;:&quot;slideDown&quot;,&quot;speed&quot;:850,&quot;easing&quot;:&quot;easeOutBack&quot;}" />
    </div>
    
    <img name="animage" class="b-close" src="images/image2.png" width="40" height="20" />
    
    <div id="popup2">
    pop me up #2
    </div>
    The difference between genius and stupidity is that genius has its limits. (Albert Einstein)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •