Skip to main content

bPopup.js – A jQuery modal popup plugin

01.24.15: New release, bPopup version 0.11.0

01.16.14: Sadly my host has had serious server issues why all old comments are gone!

bPopup is a learning and exploring jQuery project. It’s a lightweight cross browser jQuery popup plugin. It’s not creating your popup but doing all the logic as opening, closing, centering on resize & scroll, creating a modal overlay etc. It can open any container you create with all kinds of content. bPopup has been tested in IE67-9, FF2-7, Opera 9-10, Safari 4-5 and Chrome 4-15.

Contents

  1. How to use bPopup
  2. Options (API)
  3. Changelist (github)
  4. What can you do?
  5. License
  6. Support

How to use bpopup

» Click here to see a jsfiddle you can play with! « Basic example that will bind a click event which will trigger bPopup when fired. Add a reference to the jquery core lib (newer than 1.3.x) and bPopup. Please don’t hotlink to bPopup:

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/x.x.x/jquery.min.js"></script>
    <script src="jquery.bpopup-x.x.x.min.js"></script>

Markup: Add a button + an element to pop up.

    <html>
        <head> ... </head>
        <body>
          ...
            <!-- Button that triggers the popup -->
            <button id="my-button">POP IT UP</button>
            <!-- Element to pop up -->
            <div id="element_to_pop_up">Content of popup</div>
          ...
        </body>
    </html>

CSS: Hide the element you want to pop up on page load.

    #element_to_pop_up { display:none; }

The magic: Bind a click event on the button which will trigger the popup.

    // Semicolon (;) to ensure closing of earlier scripting
    // Encapsulation
    // $ is assigned to jQuery
    ;(function($) {

         // DOM Ready
        $(function() {

            // Binding a click event
            // From jQuery v.1.7.0 use .on() instead of .bind()
            $('#my-button').bind('click', function(e) {

                // Prevents the default action to be triggered. 
                e.preventDefault();

                // Triggering bPopup when click event is fired
                $('#element_to_pop_up').bPopup();

            });

        });

    })(jQuery);

Or with custom settings

    ;(function($) {
        $(function() {
            $('#my-button').bind('click', function(e) {
                e.preventDefault();
                $('#element_to_pop_up').bPopup({
                    appendTo: 'form'
                    , zIndex: 2
                    , modalClose: false
                });
            });
         });
     })(jQuery);

Enjoy

Options

API – name [type] (default value)
amsl[int] (50) Above Mean Sea Level. Vertical distance from the middle of the window, + = above, – = under.
appendTo [string] (’body’) Element to append popup (and modal overlay) to. For asp.net sites append to ‘form’.
appending [bool] (true) Should the popup append to an element or just open where it is? Version 0.7.0
autoClose[int] (false) Auto close the popup after x amount of ms, autoClose: 1000 = auto closes after 1 sec. Version 0.9.4
closeClass [string] (‘b-close’) Class to bind the close event to. Version 0.3.3
content [string] (‘ajax’) Content of bpopup. Types: [‘ajax’, ‘iframe’, ‘xlink‘, ‘image’ (Added in version 0.9.0)]. If loadUrl isn’t defined it’ll not use content type. Version 0.4.1
contentContainer [string] (false) Element which content should be added to. If undefined/null it will add it to $(this). Usage contentContainer:’.element’ or contentContainer:’#element’. Version 0.4.1
easing [string] (‘swing’) The easing of the popup when it opens. ‘swing’ and ‘linear’ are built-in in jQuery. If you want more you can use the jQuery Easing plugin. Version 0.9.0
escClose [bool] (true) Should popup close when press on escape?
follow [bool,bool] ([true,true]) Should the popup follow the screen vertical and/or horizontal on scroll/resize? [horizontal, vertical, fixed on screen (see positionStyle instead)] Version 0.3.6. Changed in version 0.5.0 and again in version 0.6.0 and again in version 0.7.0.
followEasing [string] (‘swing’) The follow easing of the popup. ‘swing’ and ‘linear’ are built-in in jQuery. If you want more you can use the jQuery Easing plugin. Version 0.9.0
followSpeed [int/string] (500) Animation speed for the popup on scroll/resize. Version 0.3.6
iframeAttr [string] (‘scrolling=”no” frameborder=”0″‘) Gives you the possibility to customize the built-in iframe support. Default removes the scrollbar and border. Version 0.9.4
loadData [object or string] (false) LoadData is representing the data attribute in the jQuery.load() method. It gives you the opportunity to submit GET or POST values through the ajax request. Version 0.9.0
loadUrl [string] (false) External page or selection to load in popup. See loadCallback for callback. Version 0.3.4
modal [boolean] (true) Should there be a modal overlay behind the popup?
modalClose [bool] (true) Should the popup close on click on overlay? Version 0.4.0
modalColor [string] (‘#000′) What color should the overlay be? Version 0.3.5
opacity [float] (0.7) Transparency, from 0.1 to 1.0 (filled). Version 0.3.3
position [int,int] ([‘auto’,’auto’]) Defines the position where the popup should pop up. ‘auto’ = center, [horizontal, vertical] Version 0.5.0. Changed in version 0.7.0, swapped positions so it’s now x, y instead of y, x
positionStyle [string] (‘absolute’) The popup’s position. ‘absolute’ or ‘fixed’ Version 0.7.0
scrollBar [bool] (true) Should scrollbar be visible?
speed [int/string] (250) Animation speed on open/close. Version 0.9.0
transition [string] (‘fadeIn’) The transition of the popup when it opens. Types: [‘fadeIn’, ‘slideDown’, ‘slideUp’, ‘slideIn’, ‘slideBack’]. Version 0.9.0 / 0.9.4
transitionClose [string] (false) The transition of the popup when it closes. Default (false) will use same as defined in transition above. Types: [‘fadeIn’, ‘slideDown’, ‘slideUp’, ‘slideIn’, ‘slideBack’]. Version 0.9.4
zIndex [int] (9999) Popup z-index, modal overlay = popup z-index – 1.
Events
callback Event fires after the popup has loaded.Usage: $(‘element_to_pop_up’).bPopup({ //options }, function(){ //callback }); Version 0.3.5
loadCallback Callback for loadUrl, triggers when the loadUrl is loaded: $(‘element_to_pop_up’).bPopup({ loadUrl: ‘test.html’, loadCallback: function(){ //doMagic }}); Version 0.8.0
onOpen Event fires before the popup opens.Usage: $(‘element_to_pop_up’).bPopup({ onOpen: function(){ //doMagic }}); Version 0.5.0
onClose Event fires after the popup closes.Usage: $(‘element_to_pop_up’).bPopup({ onClose: function(){ //doMagic }}); Version 0.5.0
Public Function
close() Closes the popup. Usage:
var bPopup = $(‘element_to_pop_up’).bPopup();
bPopup.close();
Version 0.4.0
reposition(animateSpeed) Recalculates the center position of the popup. The animate speed attribute is optional. If not defined it will use the “followSpeed” value. Usage:
var bPopup = $(‘element_to_pop_up’).bPopup();
bPopup.reposition(100);
Version 0.10.0
Recycle Bin – not there anymore
duration[int/string] (‘normal’) Animation speed.Removed in version 0.3.6 – See fadeSpeed and followSpeed.
fadeSpeed [int/string] (250) Animation speed on fadeIn/out. Version 0.3.6. Renamed in version 0.9.0 – see speed instead
minTop [int] (20) Minimum distance from top to popup. Removed in version 0.3.6
vStart [int] (null) Vertical start position for popup. Version 0.3.6, Removed in version 0.5.0 – See Position.
xLink [boolean] (false) Is the popup a xlink popup? Version 0.3.4, Removed in version 0.4.1 use content type instead (content:’xlink’)

Changelist

The change-list will be updated on github in the future: https://github.com/dinbror/bpopup#changelog.

0.9.0 change-list (26.02.13):

  • New option: transition: ‘fadeIn’. Now you can change the way the popup should pop up. Default is fadeIn as it always has been, but now it can also ‘slideDown’ or ‘slideIn’. More to follow!
  • New option: loadData: false. loadData is representing the data attribute in the jQuery.load() method. It gives you the opportunity to submit GET or POST values through the ajax request.
  • New option: easing: ‘swing’ and followEasing: ‘swing’. Now you can control the easing effect on open and follow. In jQuery there are two kinds of easings, swing as default and linear. If you want more you can include a plugin like the jQuery easing plugin.
  • New feature: New content type added, ‘image’. When using loadUrl (ajax or image) it will recenter when the request has loaded. Be aware of the animate height/width bug in jQuery 1.9.0 (http://bugs.jquery.com/ticket/13183). It’s fixed in version 1.9.1.
  • Changed: Renamed the option fadeSpeed to speed. The name fadeSpeed doesn’t make sense anymore after I added the new transitions.
  • Changed: Skipped the lowerCamelCase naming convention, sorry, I just don’t like it. bClose is now b-close, bModal b-modal and so on.
  • Bugfix: Closing the popup while scrolling will now always close the popup entirely.

0.8.0 change-list (09.01.13):

  • Bugfix: Closing a popup with the public close method didn’t unbind the click events properly. The bug was only present if used with multiple popups (Thanks to Ben Meyers for reporting it).
  • Bugfix: Resizing with positionStyle: fixed didn’t center.
  • Bug: Apple introduced a timer bug in IOS6 when zooming/scrolling and didn’t fix it in the latest release 6.0.1, why I temporary disabled the scroll/resize events in bPopup but only for iDevices with IOS 6 or 6.0.1. I need more time to investigate for a better solution but hopes that Apple will fix it in the next IOS release. I found some fixes which are working but I’ll not implement them in bPopup at the time. Fix 1: https://gist.github.com/3798925 Fix 2: https://gist.github.com/4180482 If you want to use one of them include the script before bPopup and remove “isIOS6X” from bPopup (2 places).
  • Changed: The closeclass is now using delegate() instead of the more heavy live() event handler. Important note – this means that bPopup now is depending on jQuery 1.4.2+ instead of 1.3.0+. Is someone using jQuery below version 1.4.2?
  • New option: loadCallback. When using loadUrl you can now define a callback.
  • Cleaned code a bit.

0.7.0 change-list (21.04.12):

  • Bugfix: Multiple popup count fix (Thanks to Michael for reporting)
  • Bugfix: Callback now returns ‘this’ instead of ‘window’ (Thanks to Jeppe for reporting)
  • Bugfix: Scroll before popup is loaded opacity fix
  • Bugfix: Moved initialization of popup to after onOpen event so it will center properly when adding stuff onOpen.
  • Changed: Important note – Swapped arguments in Position so it now takes [x, y] instead of [y, x] like everything else in the world.
  • Changed: Important note – Also swapped arguments in Follow so it also takes [x, y] instead of [y, x] and removed third argument. See positionStyle instead.
  • New option: appending: true. Defines if the popup should append to an element or just open where it is.
  • New option: positionStyle: ‘absolute’. Defines the position style which has impact on how the popup follows on scroll and resize. Absolute or fixed.
  • Removed private function, getDistanceToBodyFromLeft().

0.6.0 change-list (29.10.11):

  • New feature: Supports multiple bPopups. Now you can open all the bPopups you want on top of each other.
  • New feature: Won’t follow if popup is bigger then the window.
  • Changed: Added 3rd parameter to follow, default false. If true the popup will be fixed on the screen.
  • Removed: Browser detecting is bad why I removed the check for IE6. IE6 doesn’t support position: fixed but I don’t support IE6 any more. I’m afraid I killed it. It’s easy to add if you still need to support IE6.

0.5.1 change-list (13.04.11):

  • Bugfix: Added a duration time to the hide() call so onOpen and loadUrl always will be trigged when needed.
  • Bugfix: Added frameborder=”0″ and scrolling=”no” to iframe to remove borders in IE. Removed width=”100%” and height=100%” from iframe so you have full control over the iframe
  • Code update: updated the logic regarding follow and position

0.5.0 change-list (12.03.11):

  • bPopup, now with more control and features!
  • New events: onOpen and onClose
  • New option: Position[‘auto’,’auto’]. Replacing vStart. Gives you full control where the popup should be.
  • Changed option: follow changed to array of booleans, follow[true,true]. Defines if the popup should follow vertical and/or horizontal.
  • Changed option: default value for amsl changed from 150px to 50px.
  • Removed option: vStart, see Position.
  • Removed feature: the popup doesn’t auto reset input fields or auto focus any more. If you need this feature do the magic inside the onOpen event.
  • Removed feature: xlink removed from content type. Instead do the xlink stuff inside the onOpen event.
  • Bugfix: Modal overlay fits whole screen on an iphone in safari.
  • Known issue: The popup doesn’t center properly when zooming on an iphone in safari.

0.4.1 change-list (17.10.10):

  • New option: content, now it’s possible to load content into the popup through Ajax or in an iframe. It takes the url from loadUrl.
  • New option: contentContainer, gives you the possibility to load content into a small area of the popup e.g. a div at the bottom.
  • Removed option: xLink, use content type instead (content:’xlink’)!

0.4.0 change-list (22.09.10):

  • Attention: In this update there has been changes that affect how you interact with the popup!
  • New option: modalClose (should the popup close on click on overlay?)
  • New way to create the popup.You should now call $(selector).bPopup() instead of $(selector).openPopup().
  • New way to force popup to close. Force close by calling the public function close(), $(selector).bPopup().close(), instead of triggering the close event with $(‘.bClose’).closePopup(). This will stop cluttering up the $.fn namespace.
  • Changed default value for opacity from 0.5 to 0.7
  • Ensures that the same popup can’t be opened twice at a time.
  • Next update will include support for iframes, generic xlink support and more.

0.3.6 change-list (14.07.10):

  • New options: fadeSpeed, follow, followSpeed, vStart
  • Deleted: duration, minTop
  • Included position:absolute styling on popup in plugin

0.3.5 change-list (05.07.10):

  • New option: modalColor
  • bPopup can now take callback functions

0.3.4 change-list:

  • New option: loadUrl
  • The popup can now open an url inside the popup
  • Implemented x-link feature
  • Refactored code, created private help functions
  • Changed default value for scrollBar to true

0.3.3 change-list:

  • New options: opacity, closeClass
  • Changed modal overlay to position fixed in supported browsers. Non position fixed supported browsers still uses position absolute.
  • Added default close event
  • Fixed issue with overlay in IE6+7 and body positioned relative with a width

0.3.2 change-list:

  • Modal overlay width miscalculation on resize.
  • Auto textfield focus
  • Resetting textfields before showing popup

0.3.1 change-list:

  • New options: escClose, zIndex and minTop.
  • Fixed bug with modal overlay when body has position: relative and a width. Now calculates the distance from the left to the body.

0.3.0 change-list:

  • Unbind events on close.
  • Centering popup on resize.
  • Centering popup on horizontal scroll.
  • Refactor code.

What can you do?

  • Report bugs
  • Help optimizing code
  • Give suggestions

License

bPopup is licensed under the DWIWYWBPVMS license. (Do With It What You Want But Please Visit My Sponsor).

Support

Support bPopup by visiting my sponsor:

391 thoughts to “bPopup.js – A jQuery modal popup plugin”

  1. Thanks Bjørn, this works well!

    For anyone else looking to add a delay before the popup is displayed, I suggest setting #popup_this {display: none;} in the CSS and using the following script:

    $( document ).ready(function() {
    setTimeout(function(){
    $(‘#popup_this’).bPopup();
    $(‘#popup_this’).css(‘display’, ‘block’);
    }, 4000);
    });

  2. Hi
    I am testing bpopup using frame to load an html content.
    I have the way to know the height of the content for the iframe and so check for max height in screen.
    How can I insert it in your java code in order to display it vertically centered?
    I tried the events you describe in this page but I wasn’t able to make them work.
    My knowledge on javascript/jquery is limited, must I say.
    Thank you in advance for any help.

  3. onClose event not firing when calling the close function like $(‘#div’).bPopup().close();

    Any idea to lunch the event when is close?

    Regards,

  4. Hi There, is it possible to close / destroy an existing bPopup Window via an external Event.
    I would like to autoclose an existing bPopup. Not at the initialization.
    Has anybody an idea? THX

  5. Is there anyway with loadURL / image type, to make it reload the image every x seconds? or something similar?

    Thanks

  6. Thanks for your amazing popup plugin

    but i have some problems with reloading parents page during submit process

    i want it to reload parent page after submit in popup page(iframe). but i don’t know how.

    do you know how to solve it?

    here is my popup source related….

    id

    function login() {
    $(“#frm”).submit();
    /* parent.opener.location.reload(); doesn’t work */
    /* window.parent.location.reload(); doesn’t work*/
    window.parent.$(‘#element_to_pop_up’).bPopup().close();
    }

      1. Hi Dinbror,

        First of all: thank you for this great plugin. It works better than jQuery Mobile because there’s no css that interferes with my page layout.
        As some people already mentioned I’m having the issue that the popup opens in the wrong place the first time, but second and subsequent open at the right place. When I add css to the popup container to center it, it opens in the right place the first time, but afterwards it does not.

        Kind regards,
        Piet

      2. hey hi when i click on text box of bpopup in mobile ..bpopup slightly get move to left side..

  7. if you are using content ajax and close with $(element).bpopup().close(); , if you click pop AGAIN, the content is duplicated. Fixed it by making a var with the initial bpopup and calling thatvar.close();

    1. Sir, i am facing the same problem. I have tried several ways.. but unable to resolve the issue.. can you please give me the solution..

  8. Hi ,
    i am trying to load the url http:\\www.google.co.in using bpopup.

    i am unable load this url and am using iframe.

    its my code.
    function OpenPopUp() {
    $(‘#pnlPopup’).bPopup({
    modalClose: false,
    escClose: false,
    appendTo: ‘Form’,
    content: ‘iframe’,
    contentContainer: ‘.content’,
    loadUrl: ‘http:\\www.google.co.in’
    });
    }

  9. I’ve install bPopup and have a simple popup configured on my main.php page:

    $(‘#element_to_pop_up’).bPopup({
    contentContainer:’.content’,
    loadUrl: ‘test.php’,
    onClose: function(){
    var name = $(‘#name’).val();
    console.log(name)
    }
    });
    When the button is pressed #element_to_pop_up is shown and test.php is loaded. test.php contains:

    SITE
    NAME
    ID
    DESC

    When the close button is pressed the popup closes and my console.log does show the value from name

    What I’d like to do is have is:

    1. a close button that closes the popup without passing the values back
    2. a separate submit button that submits the form to a database, closes the popup and returns the 3 values to the parents OnClose function.

    Any idea how I can do this ?

    Thanks

  10. Hi, I implemented the popup. It is working fine in Chrome and in Firefox as well, but throwing exception in IE.
    Exception message – Object doesn’t support property or method ‘bPopup’
    Please suggest what should I do to fix this? Thanks

    1. Sir may i know how to use above mentioned code to get the popup on close the web page. please help me

  11. HTML

    Sign Up

    Username:

    E-mail:

    Password:

    Confirm Password:

    JS
    (function($) {

    // DOM Ready
    $(function() {

    // Binding a click event
    $(‘#sign_up_button’).on(‘click’, function(e) {
    // Prevents the default action to be triggered.
    e.preventDefault();
    // Triggering bPopup when click event is fired
    $(‘#sign_up_form’).bPopup();

    });

    });

    });

    But the button still won’t pop up?

  12. hi,

    i want the popup to come automatially with the window on load… can you please tell me how i can do that.. i tried but failed…

  13. In an SPA site when I click BPOP to show a window, navigate away from the page, and go back and issue BPOP again I then have two of the same items in the DOM. Is there a way to prevent this?

  14. Hello Dinbror,
    Could you clear up the conditions of your bPopup plugin license ?
    I’m WordPress developer and would like to use your plugin in my commercial theme for Envato market.
    Can I use your product with your license ?

      1. please answer kindly how to auto open your super bpopup automatically. can you help me.

        1. Just call $(‘#element_to_pop_up’).bPopup(); whenever you want to pop it up

  15. Hi, thank you for sharing.
    bPopup doesn’t remain in center of its frame when I change the size of the page.

  16. i am trying to get popup as welcom to visitor for only once, but my bad luck it was not working showing everytime loading website, how i can show auto welcom popup for only once for new visitor?

  17. bPopup is great.

    Question: When I click to open a popup, then close the window, and open it again it will append the Popup container window to the HTML over and over again,

    I was looking removing the first instance using $(‘#my-window”).remove() if it is in the DOM more than once.

    How to prevent this from writing the window to the DOM on each open? Am I doing something wrong?

    $(‘#rs-subPlayerVol-icon-id’).on(‘click’, function (e) {
    e.preventDefault();

    //This will append the window over and over again?
    $(‘#rs-playervol-modal-win-id’).bPopup({
    //onOpen: function () { alert(‘onOpen fired’); },
    //onClose: function () { $(this).remove(); }
    });
    });

  18. I’m having a strange problem, when I first click the link to open the popup, the popup appears in the wrong place, cut off at the bottom of the page. However when I click a second time, the popup appears in the right place as per my CSS rules. Does anybody know how to rectify this?

  19. Hi,

    I am looking to wrap an iframe before using that element has the container to bPopup. I guess this is more of a jQuery question and I know that there is the contentContainer option, but I do not have the element on the page.

    Right now I do the following:
    $(“.button”).bind(“click”, function () {
    var frame = $(this).next(“iframe”).clone();
    frame.bPopup({ position: [‘auto’, ‘auto’], positionStyle: ‘fixed’ });
    });

    what I need is to put a div (not in the document) around the frame before creating the bPopup. Something like this:

    frame.wrap(“”).bPopup({ position: [‘auto’, ‘auto’], positionStyle: ‘fixed’ });

    There is no syntax error and the bPopup opens, but I do not have the div around the iframe.
    Anyone has an idea on how to get around this?

    Thanks for the help

  20. Great Job, thanks for sharing! I use it to replace showModalDialog in a legacy application which has Frameset on the top level. For modal == true I add and remove an extra div with class=”b-modal” which blocks access to the second navigation frame. Can you advice if I managed to imitate your style more or less? bPopup is called like
    bPopupReturn = dialogContainer.bPopup({
    loadUrl: strUrl
    , appendTo: ‘form’
    , content: ‘iframe’
    , follow: [true, true]
    , position: [‘auto’, ‘auto’]
    , opacity: (0.6)
    , modal: true
    , modalClose: true
    , onClose: closingByContainerX
    , iframeAttr: ‘scrolling=”no” frameborder=”0″ style=”height: ‘ + numHeight + ‘; width: ‘ + numWidth +’;”‘
    , secondFrame: leftPanel // ==>>> the name of the second Frame
    });

    The o.modal section of the open function got an extension:

    function open() {
    // MODAL OVERLAY
    if (o.modal) {
    $(”)
    .css({ backgroundColor: o.modalColor, position: ‘fixed’, top: 0, right: 0, bottom: 0, left: 0, opacity: 0, zIndex: o.zIndex + popups })
    .appendTo(o.appendTo)
    .fadeTo(o.speed, o.opacity);

    if (o.secondFrame)
    $(”)
    .css({ backgroundColor: o.modalColor, position: ‘fixed’, top: 0, right: 0, bottom: 0, left: 0, opacity: 0, zIndex: 100001 })
    .appendTo(window.top.frames[o.secondFrame].jQuery(‘body’))
    .fadeTo(o.speed, o.opacity);
    }

    And the close function was slightly extended, too:

    function close() {
    if (o.modal) {
    $(‘.b-modal.’ + $popup.data(‘id’))
    .fadeTo(o.speed, 0, function () {
    $(this).remove();
    });

    if ($popup.data(‘bPopup’).secondFrame) {
    window.top.frames[$popup.data(‘bPopup’).secondFrame].jQuery(‘.b-modal.’ + $popup.data(‘id’)).remove();
    }
    }

    Maybe it is better to hide left navigation when the Popup is open, it also requires to store second frame hook.
    PS I visited both your sponsors to satisfy the license requirements 🙂

  21. Hello
    i have a problem only with Safari mobile , when open the browser with a newsletter popup(jquery.bpopup.min.js) close don’t work and website it blocks. Can you help?

  22. Do you have an example how to use this inside an AngularJS app ? I like to use this in Angular App with iframe support? Will you help?

  23. *Danish* Tak for et super stykke arbejde – stiller lige mit spørgsmål i engelsk.

    Hi first of all thanks for the great work done here.

    i have a question about the reposition “reposition(animateSpeed)”.

    how do i use this function, since i currently open an Iframe, it dosent position it correctly, before i resize the browser window

    Code:
    ;(function($)
    {
    // DOM Ready
    $(function()
    {
    // Binding a click event
    // From jQuery v.1.7.0 use .on() instead of .bind()
    $(‘#my-button’).bind(‘click’, function(e)
    {
    // Prevents the default action to be triggered.
    e.preventDefault();

    $(‘#element_to_pop_up’).bPopup(
    {

    content:’iframe’, //’ajax’, ‘iframe’ or ‘image’
    contentContainer:’#element_to_pop_up’,
    loadUrl:’oludregner.php’, //Uses jQuery.load()
    opacity: 0.6, // Mørk baggrund
    positionStyle: ‘absolute’, // Skal den flytte vinduet med eller fixed position
    amsl:200 // Hvor højt over bunden af vinduet skal den vises

    });

    jQuery(‘iframe’).attr(“width”, 640); // sæt bredde på vinduet
    jQuery(‘iframe’).attr(“height”, 625); // sæt højde på vinduet
    jQuery(‘iframe’).attr(“scrolling”,”no”, “frameborder”,”0″);
    });
    });
    })(jQuery);

    i want it to reposition after opening so it centers the page.

    1. Tak 🙂

      Instead define the width and height of the iframe before pop up. You can either do it with css or maybe use the “iframeAttr” option you can pass.

  24. Trying to create a add to cart feature with the popup. I want the item to be added to the cart on click. Page has the pop up working but not adding the item to the cart. You’ll also see a default submit form link, that works when click. Trying to combine the two functions in one with the popup.

  25. Thanks for the plugin. Two questions:
    – If you open more than one popup, is there a way to close them at the same time?

    Here’s my code:

    ;(function($) {
    $(function() {
    $(‘#t-axelbtn’).bind(‘click’, function(e) {
    e.preventDefault();
    $(‘#t-axelpop’).bPopup({
    appendTo: ‘form’
    , speed: 650
    , transition: ‘slideIn’
    , transitionClose: ‘slideBack’
    , zIndex: 10
    , modalClose: true
    , modalColor: ‘#333’
    , closeClass: ‘popupclose’
    , escClose: true

    });
    });

    });
    })(jQuery);

  26. Hi!

    I have one problem with pop up idea… maybe you can advice me.
    I would like to have pop-up window with 2 components of content (2 different div tag in the same pop-up). One will have text (on the left side) and the other one will have a slider – on the right side (so who ever click to open pop-up, can use that slider inside the same pop-up (I can not use it anymore word “pop-up”… I’ve already worn uou it:( ).

    So what ever is inside P-U 🙂 it’s already existing on the same page but hidden.
    Did I explan good so far?
    I’ve tried with different sliders as a plug in, but it’s always the same mistake. While I do not hidde the content that should be in P-U, it works perfectly, BUT… when I hidde and try to open it with it the slider do not work… it’s frozen.. It’s not possible to press arrows or anything else…

    Do you have some advice for me because I work on it last few days and I’m little tirred of not finding the right thing on Internet or any answer on my idea…

    Than you in advance

  27. Hi! Great query and thanks.
    I just have a question, or better a request.

    Can I launch directly my video, without the click on the button.

    I would like the video starting when the page is opening, and then the visitor can close it and nav in the website

  28. Hello
    I display a page with a table having many line.
    In each line appears a button. When you click on a button, a div showing information on the line is displayed by Bpopup .
    How to display this DIV in the middle of the visible part of the page?
    Pascal

  29. Hi,

    We are using popup functionality developed by you and we are really like it,

    Only have 1 issue, when we are working with mobile version of our website, it’s working fine in “portrait view”, but in “landscape view” “follow” functionality is not working.

    Can you please help us?

  30. Great plugin! How can I prevent multiple popups from opening right on top of each other? Ideally, I’d like them to be offset from one another.

    Here’s my code to create the popup.


    jQuery(function($) {
    $( "#badgeos-congrats-popup-'.$rand.'" ).bPopup({
    zIndex: 99,
    opacity: .3,
    modal: true,
    transition: "slideBack",
    follow: [true, true]
    });

    $("#badgeos-congrats-popup-'.$rand.'-close").click(function (e) {
    $( "#badgeos-congrats-popup-'.$rand.'" ).bPopup().close();
    });
    });

    1. HI Allan,

      I have the same issue and wanted to ask if you have manage to resolve it : )

      Many thanks in advanced.

      Kind regards,
      Ivan,

  31. Hi,

    i am using bPopup Plugin to display woocommerce “WooCommerce Composite Products” plugin product short description in popup box.

    Using this plugin selected composite product display step by step. When i am in first step and press on my created “Info” button then this popup open and display product short description in popup box. But when i am come in second or any other step then when i am press “Info” button then pop up is not display.

    Following is my code.

    ———————————————————–

    Info

    X
    $product->post->post_excerpt,
    ‘product_id’ => $product->id
    ), ”, $woocommerce_composite_products->plugin_path() . ‘/templates/’ );

    ?>

    ————————————————————-

    ;(function($) {
    // DOM Ready
    $(function() {
    $(‘#my-button’).bind(‘click’, function(e) {
    e.preventDefault();
    // Triggering bPopup when click event is fired
    $(‘#element_to_pop_up’).bPopup({
    modalClose: false,
    opacity: 0.6,
    positionStyle: ‘fixed’ //’fixed’ or ‘absolute’
    });

    });
    });
    })(jQuery);

    ———————————————————-

    <script src="/js/jquery.min.js” type=”text/javascript”>
    <script src="/js/jquery.bpopup.min.js” type=”text/javascript”>

    ———————————————————

    IF any one know my solutions then please Replay me.

    Thanks,
    Ketan.

  32. Hi there, could this autoload when page loads so no need for popup button? I wanted to use as an alert popup when a visitor hits the page?

    Thanks

    1. Hi Gary,
      Did you get any answer ?
      I am also looking for the same. Popup autoload and open without a click.
      Thanks
      Paul

  33. very usefull tool for me!It will be more usefull if it can add the function that helps the “iframe” popup window to return some params to the parent window.Now i just define some elements in the parent window,and use something like $(‘#element’,window.parent.document).val(‘some value) to “return” some params to the parent. it works but not that concise.

  34. Hi, I’ve noticed that your website (http://dinbror.dk/bpopup/) is out of date as your page focusly on old plugin source code, so the new 0.11.0 doesn’t work properly with your page code as you have everything rewrite (i compared new and old code)

    No matter what, clean HTML code – when you click on it it stay top, middle, not even centerally – how do I solve this? See this: –

    #element_to_pop_up {
    background-color:#fff;
    border-radius:10px;
    color:#000;
    display:none;
    padding:10px;
    min-width:100px;
    min-height: 100px;
    }

    x

    Click me!

    ;
    (function ($) {
    // DOM Ready
    $(function () {
    // Binding a click event
    // From jQuery v.1.7.0 use .on() instead of .bind()
    $(‘#my-button1’).bind(‘click’, function (e) {
    e.preventDefault();
    $(‘#element_to_pop_up’).bPopup({
    position: [“auto”, “auto”] //x, y
    });
    });
    });
    })(jQuery);

    I’ve tried position set it to auto – it doesnt even work? I am bluffed why it doesnt ever in middle, center?

    Thank you.

    James

    1. Ah the code is being stripped out, here’s the correct ones… (hope it works so you understand, please corrected it (just delete empty spaces)

      #element_to_pop_up {
      background-color:#fff;
      border-radius:10px;
      color:#000;
      display:none;
      padding:10px;
      min-width:100px;
      min-height: 100px;
      }

      x

      Click me!

      ;
      (function ($) {
      // DOM Ready
      $(function () {
      // Binding a click event
      // From jQuery v.1.7.0 use .on() instead of .bind()
      $(‘#my-button1’).bind(‘click’, function (e) {
      e.preventDefault();
      $(‘#element_to_pop_up’).bPopup({
      position: [“auto”, “auto”] //x, y
      });
      });
      });
      })(jQuery);

  35. Hello everyone
    Can you help me how can I search my Popup opens only once (say 1 time per day) per user session.
    because my Popup opens only once, to see my Popup I have to delete my cookies every time
    I did the update of jquery.bpopup.min.js file
    version: 0.10.0.min toversion: 0.11.0.min
    Then I create a file popupc.js
    functions

    popupc.js

    $(window).ready(function() {
    if(! checkCookie() ) {
    $(‘#popup’).bPopup({
    modalClose: true,
    opacity: 0.6,
    positionStyle: ‘fixed’ //’fixed’ or ‘absolute’
    });
    setCookie(“popup”, “visitor”, 365);
    }
    });

    function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = “expires=”+d.toUTCString();
    document.cookie = cname + “=” + cvalue + “; ” + expires;
    }

    function getCookie(cname) {
    var name = cname + “=”;
    var ca = document.cookie.split(‘;’);
    for(var i=0; i<ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1);
    if (c.indexOf(name) != -1) return c.substring(name.length, c.length);
    }
    return "";
    }

    function checkCookie() {
    var user = getCookie("popup");
    if (user != "") {
    return true;
    } else {
    return false;
    }
    }

    Code to display the Popup, told me if this is correct

    A big thank you in advance.
    I am French

  36. ev.preventDefault();
    $(‘#element_to_popup’).bPopup({
    amsl:50,
    speed: 450,
    transition: ‘slideDown’,
    transitionClose: ‘slideUp’,
    scrollBar: true,
    onOpen: function() { widthsizingpopup(); },
    onClose: function() {$(‘#element_to_popup’).empty();}
    });

    #element_to_popup {
    background-color:#fff;
    border-radius:15px;
    color:#000;
    display:none;
    padding:20px;
    min-width:400px;
    min-height: 180px;
    }

    But Scrollbar not enabling

  37. (sorry the html tag is missing after post)

    Hi,

    I have been using bPopup for a long time. Recently i got a problem when i upgrade from v0.9.4 to v0.11.0.

    On iPad Safari, when i launch a popup, it goes to the left side, not centered in the screen. I notice this behavior has something to do with the viewport meta data. What i use is <meta name=”viewport” content=”width=device-width”> and the page width is 1210px. If i change meta to <meta name=”viewport” content=”width=device-width, minimum-scale=1, maximum-scale=1″>, the popup is centered, but this meta is not what i want.

    I do not know if this is a bug or i just missed something to make it work.
    Thanks!

  38. Hi,

    I have been using bPopup for a long time. Recently i got a problem when i upgrade from v0.9.4 to v0.11.0.

    On iPad Safari, when i launch a popup, it goes to the left side, not centered in the screen. I notice this behavior has something to do with the viewport meta data. What i use is and the page width is 1210px. If i change meta to , the popup is centered, but this meta is not what i want.

    I do not know if this is a bug or i just missed something to make it work.
    Thanks!

    1. Ok, just got another way to deal with it, but I would love to see a option for it, if you plan something that way it would be awesome

      “forceOpen: true;” so you can combine it with “autoClose” perfectly


      $(document).ready(function() {
      $("#popup-contact").bPopup();
      });

      Dont know much about javascript, if doc-ready or win-load would be better, but for me its doing well ( cause less images etc. )

  39. When I increase the width of popup block, than it will appear from the top of viewport. It doesn’t get align in center of viewport.

    Can u help me in that ?

  40. New Option Suggestion:

    contentContainerClear [boolean] (false) – if true and if contentContainer is defined, remove existing content from the content container before injecting the delivered content.

    In my usage, a dialog is created dynamically based on the item to which bPopup is attached. A server-side script formats the dialog and returns the contents. This results in a brief but noticeable delay on the client side during which time the empty dialog is not well formatted. I would therefore like to include some default content so the dialog has a better appearance before the actual content is delivered.

    Another possible solution to my use case:

    showWaiting [boolean] (false) – if true, bPopup displays a waiting image (animated GIF) until the content is delivered and only then displays the popup and injects the delivered content. If the content delivery stalls, clicking on the overlay can dismiss the waiting image and bPopup.

    The user experience for this second idea is probably better.

    Thanks.

  41. Nem mindenki script tudós, miért nincs html példa sehol??

    var self = $(this) //button
    , content = $(‘.content’);

    $(‘element_to_pop_up’).bPopup({
    onOpen: function() {
    content.html(self.data(‘bpopup’) || ”);
    },
    onClose: function() {
    content.empty();
    }
    });

    Html ???

  42. Hi, thank you for this great popup. All good, but I have 1 problem:
    first 4 click my item show in random position, then on center screen. Please, help, how i can fix that?

  43. Hi,
    Firstly, I have to appreciate for the work you have done, I love it

    But recently I ran into issue on Ipad ,it work absolutely fine on web but Ipad positioning is not centered though i used the property POSITION:[‘auto’, ‘auto’], POSTIONSTYLE: “absolute” .
    can someone help me out with Ipad positioning issue

    Thanks a lot in advance

  44. First and foremost, this is an excellent popup! I just want to share my experience to help someone else in case they ran into it. I got the popup working just fine, very simple! The problem I ran into was when the popup container contained a button which wouldn’t fire. I was writing in ASP.net and thought the problem was with the event.preventDefault and was able to get around using that option but still couldn’t get the button to fire. I saw the appendTo option but didn’t know what it was for. But when I tried the option, the button works all of a sudden! It’s as simple as $(‘#MyPopup’).bPopup({appendTo: ‘form’ });

  45. how to add javascript variable or javascript value in bpopup…i want to show javascript variable value in bpopup

  46. Hej,

    this tool is really excellent – it works perfectly. With one minor exception: once clicked on a link that has a tool tip, the tooltip remains (it doesn’t disappear as in case when the link is only hovered). Want to see it: http://kt75-mirror.blogspot.com. Credits for this tool can be found under “about”. Thank you again, great work.

    Cheers Wolfram

  47. Hi,

    I want to have several pop up button, but when i add a button , the second element to pop up appears on the first button, the second time i click on it.

    What can i do to diffenrentiate the two (or more) button ?

    Thanks !

  48. Hi,

    Is it possible to include needed tags for Vimeo videos iframe embed code? The code I need to add is:

    <iframe src="https://player.vimeo.com/video/123456789" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>

    I have the path being called up fine, but how can I get webkitallowfullscreen etc to be applied to the iframe?

    Thanks.

    1. I sorted it by adding “iframeAttr” to the js code options. I must have missed it the first time round. Thanks.

  49. Hello,

    nice plugin man, But I have a question… How can I detect a GET variable from the url and. if that variable is present in the url, trigger the pop-up?

    Thank you so much

  50. Would be nice to have a simple example with cookie integration, for example; check cookie if user has visited site in last 7 days do not show popup…

  51. Want to auto focus on bpopup open event?

    do it like this….

    Button6 is trigerring bpopup to open
    Panel1 is the div where the popup is located
    and txtDiagnosa is the input that i want to autofocus on open

    please note that i left the function in onopen properties empty, because it wont work to autofocus on open as described in the documentation..

    $(‘#Button6′).on(‘click’, function (e) {

    e.preventDefault();
    $(‘#Panel1′).bPopup({

    onOpen: function () {

    },
    modalClose: false,
    opacity: 0.6,
    positionStyle: ‘fixed’ //’fixed’ or ‘absolute’

    });
    $(“#txtDiagnosa”).focus();

    });

  52. Hi am using bpopup , in chrome popup is not come center on scroll its going left side of the page.

    1. for coming center am using following code
      jQuery.fn.center = function () {
      this.css(“position”,”absolute”);
      this.css(“top”, Math.max(0, (($(window).height() – $(this).outerHeight()) / 2) +
      $(window).scrollTop()) + “px”);
      this.css(“left”, Math.max(0, (($(window).width() – $(this).outerWidth()) / 2) +
      $(window).scrollLeft()) + “px”);
      return this;
      }

  53. Hi! Can anyone help me with the following problem?
    I defined the popup to be stuck in top-right position with CSS, like this:

    .top-right {
    position: fixed;
    top: 1em;
    right: 1em;
    }

    Now I need to follow the popup while scrolling. If I simply make like this:

    $(‘#mydiv’).bPopup({
    follow: [true, true]
    });

    the popup ignores my css and appears in the middle of the page.

    If I make like this:

    $(‘#mydiv’).bPopup({
    position: ‘fixed’,
    follow: [true, true]
    });

    the popup isn’t following the scrollbar but staying up.
    How to fix this?
    Thanks!

  54. This is a great tool. I have one problem. When the page that contains the popup loads, the dark modal background loads before the rest the of the page, then disappears when the page loads completely. What do I do to prevent this behavior? I don’t want to see everything ‘go black’ for a moment.

    My page is here:
    http://www.star.nesdis.noaa.gov/socd/sss/4sqmDraft/index_bpopup.php

    Any help is appreciated.

  55. Hy Bjørn,

    i have a Problem with the autocomplete, the list from this is behind the bPopup.

    Do you have a solution for this?

    $(“input#test”).autocomplete({
    source: [ “c++”, “java”, “php”, “coldfusion”, “javascript”, “asp”, “ruby” ]
    });

    Tags:

    Thank you,
    regards Ronnie

  56. hi there,

    I’ve got a small problem with the close button.
    When I call the popup, the close button appears normally. I then close the popup. But if I call the popup again, the close button doesn’t appear anymore.

    My code:

    ;(function($) {
    $(function() {
    $(‘#marc’).on(‘click’, function(e) {
    e.preventDefault();
    $(‘#about_popup’).bPopup({
    content:’iframe’,
    contentContainer:’#about_popup’,
    modalClose: true,
    loadUrl:’about_marc.html’
    });
    });
    });
    })(jQuery);

    (…)

    x

    What’s the issue?

  57. Hi,
    Wonderful scripts, thank you so much! Unfortunately I discovered that the close button is not visible in the popup when is clicked for the second time or more.
    I’m a newby to java and propably I do something incorrect.

    I’ve made for now an external reference tot jquery.bpopup.min.js, but made a stylesheet on page level. All the same code as in the examples.

    I hope you can help me.

    You can see the test page here:
    http://www.officeprograms.nl/test/test-bpopup.htm


    POP IT UP

    x

    ;(function($) {

    $(function() {
    //* also jused ‘on’ instead ‘bind’ but no others results.
    $(‘#my-button’).bind(‘click’, function(e) {
    e.preventDefault();
    $(‘#element_to_pop_up’).bPopup({
    content:’image’, //’ajax’, ‘iframe’ or ‘image’
    loadUrl:’backend-koppelen.png’
    });
    });
    });
    })(jQuery);

  58. Hi,
    I have more than one link (and div) that are generated automatically (list of users). I distinguished the ids of links and divs, by using link_userId and div_userId. However, the popup link doesn’t work anymore. Have I missed something? here is an example:

    jQuery(document).ready(function(){jQuery(“#pop-link_14507”).bind(“click”,function(a){a.preventDefault();jQuery(“#pop_up_div_14507″).bPopup({speed:650,transition:”fadeIn”,transitionClose:”fadeIn”})})}); Nancy x n.x@xx.de Leiterin jQuery(document).ready(function(){jQuery(“#pop-link_14529”).bind(“click”,function(a){a.preventDefault();jQuery(“#pop_up_div_14529″).bPopup({speed:650,transition:”fadeIn”,transitionClose:”fadeIn”})})}); Anja x a.x@xx.de

  59. Hi, in situation when main window is vertically scrolled down, bpopup takes relative top position from main window. That means, that bpopup is not on the top (0 px), but you can scrolled up to absolute top of main window (popup is somewhere below). When I use fixed position (positionStyle), bpopup is on the absolute top, but height is just on screen height and is not possible to scroll down in popup.

    Do someone has any solution on this problem?

  60. After some inkering I got almost everything working, still can’t get the transistionClose to work however. Any help would be greatly appreciated on this.

    If the modal is tall, and the user needs to scroll, then upon closing the modal the scroll position resets to where it was when the modal opened. I’m using this plugin for the cookies: jquery.cookie.js


    jQuery(document).ready(function ($)
    {
    $('.popup-button').on('click', function(e)
    {
    $.cookie( 'scrollLine',$(window).scrollTop() );
    e.preventDefault();
    $('#element_to_pop_up').bPopup(
    {
    "speed":"slow",
    "transition":"slideDown",
    "transitionClose":"slideUp",
    onClose: function(){ $('html,body').scrollTop($.cookie('scrollLine')); }
    });
    });

    $('.close-button').on('click', function()
    {
    $('html,body').scrollTop($.cookie('scrollLine'));
    $('#element_to_pop_up').bPopup().close();
    });

    });

    This also worked for the close:


    $('element_to_pop_up').bPopup({onClose: function()
    {
    $('html,body').scrollTop($.cookie('scrollLine'));
    }});

  61. I gave up trying to get the “data-bpopup” to work and just put the parameters directly into the jquery…
    ————————————————–

    jQuery(document).ready(function ($)
    {
    $('.popup-button').on('click', function(e)
    {
    e.preventDefault(); //Prevents the default action to be triggered.
    $('#element_to_pop_up').bPopup(
    {
    "modal":true,
    "modalClose":true,
    "scrollBar":false,
    "speed":"slow",
    "transition":"slideDown",
    "transitionClose":"slideUp"
    });
    });

    $('.close-button').on('click', function()
    { $('#element_to_pop_up').bPopup().close(); });
    });

    ————————————————–

    I also figured out the missing # in the close button. Embarrassing.

    However, now the transitionClose is not working.

    Any ideas?

  62. Oops, it seems the HTML can’t be displayed. I’ll try it again….

    ————————————————–
    <button class=”popup-button”
    data-bpopup=’
    {
    “modal”:true,
    “modalClose”:true,
    “scrollBar”:false,
    “speed”:”slow”,
    “transition”:”slideDown”,
    “transitionClose”:”slideUp”
    }’>PopUpButton…</button>
    <!– Element to pop up –>
    <div id=”element_to_pop_up”>
    <span class=”close-button”>X</span>
    <img src=”images/pic01.jpg”>
    <h2>POP-UP</h2>
    <p>Vivamus fermentum nibh in augue praesent a lacus at urna congue rutrum wisi maecenas ligula.</p>
    </div>

  63. I’m having difficulty passing parameters to the script via the data-bpopup, and getting the close button to work. I’m loading in the “j.query.easing.1.3.js” along with everything else.

    Here’s the HTML I’m using….
    ————————————————–

    PopUpButton…

    X

    POP-UP
    Vivamus fermentum nibh in augue praesent a lacus at urna congue rutrum wisi maecenas ligula.

    ————————————————–
    Here’s the jquery I’ve adapted….
    ————————————————–
    /* ====== BPOPUP ====== */
    jQuery(document).ready(function ($)
    {
    $(‘.popup-button’).on(‘click’, function(e)
    {
    e.preventDefault();
    $(‘#element_to_pop_up’).bPopup();
    });

    $(‘.close-button’).on(‘click’, function(e)
    { $(‘element_to_pop_up’).bPopup(); bPopup.close(); });
    });
    ————————————————–

    Any ideas? Thanks!

  64. I am having problems with a PDF which is being created on the fly and shown in an IFrame – the IFrame is too small.

    Where do I fix the width / height?

  65. Hi Guys, I am using

    ;(function($) {
    $(function() {
    $('.product_item').bind('click', function(e) {
    e.preventDefault();
    $('.product_item_popup').bPopup({
    content : 'ajax',
    loadUrl: $(this).data("route"),

    });
    });
    });
    })(jQuery);

    For opening some products within a popoup, instead of separate page.
    So I`m loading a view into the popup.So I have a list with products and each item has
    product_item class.
    The first popup has the close button, after closing the first, the fallowing open up without it.
    Why ?

  66. I have center problem like other, i need do “reposition”,but it is ugly trick 🙁

  67. It’s a good plugin, thanks.
    I thought Would be useful to add option “o.delayedOpen = 0;” and modify open() function with the following :

    function open(){
    // MODAL OVERLAY
    setTimeout(function(){

    }, o.delayedOpen);
    };

  68. I did simple test page, based on sample ,no luck, cant run this script.
    I agree with TOM, not working.

  69. I have to use the popup script twice on two links to open two different pages on a single page….but both the links is showing same page on both popup’s…Pl help

  70. I like simple so this is perfect.

    But I want to get the popup content from wordpress function. I have built an event manager plugin that lists the events. When you select and event you get a wordpress custom post with images, maps, forms and other features. What need to be able to do ‘onclick’ is load the popup with the custom post content. Is this possible?

  71. I try to test this popup plugin and so far it works well most of the time. However, it seems like it does not work in IE8 when I use it along with jQuery 1.11.2 lib for some reasons. Can you please let me know if that is really the case or I missed something else? If it is, then please let me know what latest version(s) of jQuery that this plugin supports?

    Thanks much!
    Govee

  72. Can this script auto close other instances of itself?

    For example: I have open an help popup from a button that the script generated. I click on a different button on the page using the script and the first modal is closed and the second opened on the same click. Kind of an extension to the close when clicking on the grey background coverage.

    Currently, the cursor indicates a link but clicking it only dismisses the modal. A second click is then required to launch the new modal which is bad user experience.

    Don’t have a live example as the site is being built for my company and I can’t post it here.

    Thanks,
    Kyle

  73. I have implemented bPopup but am running into trouble applying click events to dom elements inside of the modal. I am using Backbone, Marionette, RequireJS, and the events are working fine without the modal. As soon as I wrap it in a bpopup, the events stop working.

    Any advice?

    Great plugin by the way! Hope I can use it 🙂

  74. @dinbror Thank you for the awesome popup.
    When I’m trying to load a small form in the bpopup, I’m not able to gain focus to an element. For example, in the below code, the alert dialog appear but the cursor is not set to the textbox in the bpopup.

    $(‘element_to_pop_up’).bPopup({
    onOpen: function() { $(‘#nametext]’).focus(); alert(‘onOpen fired’); },
    onClose: function() { alert(‘onClose fired’); }
    });

    Thanks.

    1. small correction in the posted code block:

      $(‘element_to_pop_up’).bPopup({
      onOpen: function() { $(‘#nametext’).focus(); alert(‘onOpen fired’); },
      onClose: function() { alert(‘onClose fired’); }
      });

  75. Hello Borg,
    I could introduce the code and it worked, but I could not remove the button to be able automatically enter the page without clicking. Thanks.

    ;(function($) {
    $(function() {
    $(‘#my-button’).bind(‘click’, function(e) {
    e.preventDefault();
    $(‘#element_to_pop_up’).bPopup({
    appendTo: ‘form’
    , zIndex: 2
    , autoClose: 7000 //Auto closes after 7000ms/7sec
    });
    });
    });
    })(jQuery);

    Regards

  76. Hi Bjørn, another million question.

    What if I want to set a Default OK button on your bpop, that works with ENTER key?
    Do you have any suggestions on how to perform this?

    Thanks.

  77. Hi Bjørn,

    First of all, thanks for the cool popup, it really helped me a lot.

    I have a strange behavior problem that i can’t figure out, maybe you can recreate it.
    I’m using exactly the code of your example with this modification.

    Is something like>

    LaunchPop(divContent, btnCancel)
    {

    btnCancel.click(function () {
    divContent.bPopup().close();
    }); //I want a button that says cancel, to close de pop.

    divContenido.bPopup({…etc etc… this works fine…

    }

    repeat this 10 times.
    1) Press to launch the pop.
    2) Press cancel.

    1st time, works great.
    2nd time, background seems to stay a little dark.
    3rd time, background seems to stay a little more dark.
    4th time, background seems to be darker and darker..
    and so on…

    what could it be the problem?
    thanks for the help.

    bye.

  78. i am not familiar with jquery… how do i load the popup “onload”

    i dont want a trigger button put perhaps just a

  79. Hello,

    I have a question about cookies. I made an popup window when you enter on main page. But how can I make that if cookies is saved the popup wont be showed

  80. Hi there,

    My popup displays but it is not correct size.
    Some of my form fields are cramped.
    Can I specify the size of the popup window? How?

    Please advise 🙂
    Thanks.

    1. This is my js code:
      ————————

      $(document).ready(function() {
      $(“#addNationality”).on(“click”, function(){
      addNationality();
      });
      });

      function addNationality() {
      path = $(“#app_path”).val();
      $(“#popupArea”).bPopup({
      loadUrl: path
      });
      };

      —————————————-
      HTML
      ——————————————-
      New Nationality
      {{ Form::hidden(‘path’, action(‘NationalityController@create’, array(‘popup’ => ‘true’)), array(‘id’=>’app_path’) ) }}

  81. Hi Dinbror,

    I have been using your bpopup in my big project, Its working is fantastic.
    The only problem I am facing is that if bpopup has more height than screen in that case I am unable to reach at bottom of the popup, when I try to scroll down popup auto position itself and I never able to access bottom part of the popup.

    But there is one way, when I resize the brower and then agian set to normal size, popup leaves it auto positioning property and now I can scroll and reach at bottom.

    But I need that when the popup is smaller that the screen height it should be auto positioning but when data loads in the bpopup and if it becomes longer than screen height it should leave its auto positioning property.

    Regards,
    Jaskaran Singh

  82. I don’t want any transitions at all. i tried
    transition:”none”,

    but it has no effect, I still get the default of fadeIn

    How can I remove opening transition

  83. Hi, that is so amazing dialog window. I wanna use it in function get_random(). Is that possible and if yes, how can i do it?
    PS. I mean…I have this random function with 5 quotes, and when i click on the button who call this function, the result (one of these 5 quotes) is appear in standart popup dialogbox. but I want the result of this function show in this beautiful BPopup.
    Thanks
    Regards
    Anna

  84. Please update the website according to the new version chnages.
    I gone through with the site settings which was broken and it gave me the wrong impression like plugin is broken.

    Fortunatlly I tried with fadein opption in transition which worked for me.
    After some time again I came back to site and found your blog link with latest version features.

    So please update your front page.

  85. Great popup! I’m having a slight problem (I’m using the latest version of Chrome). When I click the popup, then close it, and open it again the popup begins to move to the left. I noticed the css for the popup remains the same when it’s closed and slowly lowers the left css value each time the popup is opened. Below is how I’m calling it

    $(‘a[data-rel=”popup”‘).on(‘click’, function (e) {
    e.preventDefault();
    $($(this).attr(“href”)).bPopup({
    modalClose: true,
    opacity: 0.6,
    positionStyle: ‘fixed’
    });
    });

    I tried using position: ([‘auto’, ‘auto’)] and .reposition() with no avail. I’m probably going to rig JQuery to force it to center again, but if there’s a working solution to this problem I would rather use that.

    ~Thanks

    1. Never mind, I realized it was because the width of the popup was set to 90%. Changing it from a percentile fixes the problem.

  86. Hi,

    Amazing plugins.

    In this plugins can i able to display multiple images ?? like a photo gallery or slider? with previous , next, play, pause button? if so then please can you tell me how??

    or it is not possible in this plugins then do you have any other plugins which works as i said above?

    Will appreciate your help.

    Thank you. 🙂

  87. Hello,

    Amazing plugin..:-)

    Can i show multiple image with previous and next button in this popup model? Like photo gallery?? Or like slider?? Please tell me if i can.. if it is not possible in this plugin then do you have any other plugins which work as i said.? will appritiate ur help.. TY

  88. the popup is not scrolling down, my popup have a big list of cities and if i scroll down, it automatically scroll to top after i scroll down. how to change the setting so it allow to see the bottom cities

  89. hi, i am loking for a jquery popup-plugin and found this good looking bpopup!

    Now, i have a simple question:
    Is it Possible to add a fixed titlebar via custom attribute ?
    And can this titlebar be custimized via css ?

    THX alot for answering
    Andreas Mohr

  90. I am interested in the demo under Example 5c, content: (iframe content)… How do I make a link or button that also copies your button’s data-bpopup='{“content”:”iframe”,”scrolling”:”no”,”contentContainer”:”.content”,”loadUrl”:”index/of/site.html”}’ activation trigger?

    What is the Javascript code to make the link or button containing the ‘data-bpopup’ trigger a modal with those self-fed arguments? as .click with e.preventDefault() to prevent the links from being followed. Also will this technique be compatible with old browsers as well- say IE6, 7, 8 to present?

  91. Hi,

    I am switching bpopup and experiencing an issue. That is, when the popup shrinks because of browser resizing, my elements came out of the popup. My ‘div’ elements either relative positioned or absolute positioned. Is there any css setting that could make elements reflow position relative to the resizing popup? Or, is there any way to stop the popup from following browser resizing?

    Thanks

  92. I’m using the loadUrl and content: ‘iframe’ options. How can i close the bpopup from within the iframe itself? I have a button within the page loaded in the iframe that needs to close the popup, please help

  93. Hi Dinbror,
    This is what I have and it is not working for me.
    What am i doing wrong?



    POP IT UP

    x



    // Semicolon (;) to ensure closing of earlier scripting
    // Encapsulation
    // $ is assigned to jQuery
    ;(function($) {

    // DOM Ready
    $(function() {

    // Binding a click event
    // From jQuery v.1.7.0 use .on() instead of .bind()
    $('#my-button').bind('click', function(e) {

    // Prevents the default action to be triggered.
    e.preventDefault();

    // Triggering bPopup when click event is fired
    $('element_to_pop_up').bPopup({
    contentContainer:'.content',
    loadUrl: 'test.html' //Uses jQuery.load()

    });

    });

    });

    })(jQuery);

    jsfiddle.net/24A9b/11551/

    Thank you,
    regards, Tom

    1. I thought I had asked this question earlier but now I cannot find it.

      I just want to be able to open the modal without any transitions at all

      I’ve tried transition:’none’

      but I still get the default which is fadeIn

      What happens is that the empty popup opens, then another one seems to open over the top with the fadeIn transition. So how do I get rid of ytransitions on opening?

      This really is a deal-breaker for the use of this pligin on our site.

      regards,
      Stephen

  94. Best way to close bPopup is closeClass
    ————————————————–
    $(‘#dialog’).bPopup({
    opacity: 0.75,
    speed: 500,
    closeClass : ‘dialog-close’
    });

  95. Hi !!

    offsetParent is not set — cannot scroll~ How can i solve this issue?

    THX!

  96. I figured this out. Sorry about the posting. the problem was that parent.closeBPopup(); did not work properly when running on a local file system. When deployed to a webserver, it works like a charm. Thanks!

  97. One thing, here is the code I use to create the bpopup:
    element_to_pop_up is a div.

    $(‘#element_to_pop_up’).bPopup({
    content:’iframe’, //’ajax’, ‘iframe’ or ‘image’
    contentContainer:’#element_to_pop_up’,
    closeClass:’bClose’,
    modalClose: true,
    loadUrl: getButtonUrl(“create”), //Uses jQuery.load()
    position: [(0,0)]

    });

  98. Question: this has been driving me nuts. I open a bpopup using loadURL to load another html file into the popup. This html window shown in the popup has a “cancel” button. Is there anyway to close the bpopup window from within the html that I loaded in the bpopup window?

    I have a JavaScript function in the window that creates the bpopup:

    function closeBPopup() { $(‘element_to_pop_up’).bPopup().close() }

    I’ve tried :

    window.parent.closeBPopup();

    window.opener.closeBPopup();

    and a few other things. Nothing seems to work. Is what I am trying to do even possible with bpopup? I love your plugin but this is the one thing that may prevent me from using it. Please help.

    Thanks so much.

    Paul

  99. hi, it’s a very nice script. thx for your work.
    but i have a little problem to load dynamic urls without blowing up the js-code.
    is it possible to use a paremeter or the href tag to load the file with ajax into the popup?
    something like this:
    popup 1
    popup 2
    etc.?

    thx 🙂

  100. Hi, what a great js!
    I try to use the iframe method, but I need to make the box size auto adjust to fit the framed page contents. Please give me a hand. Thank you.

  101. Hi

    I’ve just discovered this script, and it’s really helpful for me. Very simple to use and does a great job. Will include it on a big website I’m working on. Keep up the good work 🙂

    Thomas

  102. Hi, great plugin. I have either found a bug, or have some flag set incorreclty. I want the window to follow the vertical scroll, so I have left the ‘follow’ and ‘positionStyle’ params at default. However, if a popup comes up that goes off the bottom of the window, and you try and scroll down to get it into view, the popup moves with the bottom of the window and not with the scrolling page. The only way around this is by resizing the window to fit the popup. If you can’t do that, it is impossible to scroll the popup completely into view.

    Thanks!

    BoB

    1. Okay, sorry, got it figured out. You have to set follow: [false,false]. It also helps to set followSpeed: 0 if you want it to stick to its position as you scroll.

  103. Hi,

    Is it possible to use an image for the button rather than the button you’re using? What would the code look like?

    Thanks,

    Devin

  104. Hi,

    Great work, by the way. Definitely the easiest popup to implement that I’ve seen and I’ve been looking around for a long time.

    I have the popup set up to have a mailing list subscription form.

    What I would like to do is have it close the popup when the user submits the form that’s in the popup. Is that possible?

    Thanks!
    Danielle

    1. Your button:
      Send

      In your script:
      $(‘.close-button’).on(‘click’, function (e) {
      $(‘#your-div-id’).bPopup().close();
      });

  105. I use the ajax popup from the tutorial to open external page in the popup (Example 5a, content).
    The content of the popup is a form the user can fill out and submit.
    After validation the form und message “Data send successful” i want to close the popup automatically after 3 seconds (autoClose).

    I placed this:
    $(‘#popup’).bPopup({autoClose: 1000});

    … nothing happens …
    The console put this as error message:
    Error:

    For further explanation, it is a Facebook Page Tab app in an iFrame.

    Im a Newbie in jQuery and AJAX, please can you help me with this.

    1. Error from console: Tried to get element with id of \”%s\” but it is not present on the page.”,”#popup2″

  106. i have a problem with the positioning of my pop. is not centralize on first click

    1. Same problem here. I’m using version 0.10. 0. First time bPopup is opened it is positioned a little too far to the right and bottom of the window. Then after re-opening everthing is fine and centered.

      Maybe calculation of the center position starts too late in the init code?

      1. OK, figured out the problem. The popup content and its dimensions must be defined before the popup is displayed. Dynamically added content in the onOpen and callback event will not center the popup.
        Using reposition() will do the trick but looks ugly when after occurance the position is correcting again.

        Would be nice to put in dynamically generated content during onOpen event and do the position calculation afterwards but before the callback event is triggered.

        Best regards.

  107. The issue I am trying to resolve is that when the popup is closed, the video content within the pop continues to play sound. Is there an easy way to fix this?

  108. HI
    On the website you seem to be using a function called data-bpopup to send parameters to the main bpopup function. Is there any chance to have a copy of this code.
    Thanks

  109. I have several buttons on a page using bPopup to show an external page in an iframe. This has worked well as long as all of the content was the same size.

    I simply put this style in each page and so each page defines the dimensions of the window.

    iframe {width: 360px; height: 300px;}

    Now however, I have an instance where I need to show some content in a larger window than this and I can’t figure out a way to get this to happen. Essentially, the one page must behave as before for all of the old buttons, but the new button needs to expand the size of the iframe.

    Also, I see the parameter ‘data-bpopup’ in the source code of your page, but it is not explained in the API. I’m thinking this might be a clue but can’t figure it out.

    Thanks for any help you can give.

  110. Hi,

    How do I remove or modify the inline styles specifically the calculation for left? The following is appended to the message box: style=”left: 670px; position: absolute; top: 171.5px; z-index: 9999; opacity: 1;” I want the box to auto align within its surrounding container.

    Thank you.

    Lisa

  111. Hi,

    I tried with custom settings but it does not work. Can you make a sample for me as reference? Thanks.

    Regards

  112. Hi,
    I’m using bPopup with loadUrl.
    When I specify a very large value in pixel to the width of the contentContainer (to use the largest width of browser window), the first time the popup open it’s ok, but the width is overwrite to “auto”, so the second time the popup take the width of the largest element in the HTML…
    I’ll try to fix it with other parameters or a personal jquery fix, but if you can look at it…
    Thanks !

    1. Bjørn,
      It’s fixed with “onClose: function() { jQuery(‘.—CONTAINER—‘).css(“width”,”—PIXEL—“); }”
      Chears,
      Maxime DAVID

  113. Hi,
    This is great. I have it set up and working nicely.
    The one thing I can’t figure out is I have a checkbox and when clicking to check the box it pops up an image.
    The pop up works great. But how can I make the checkbox get checked?

    I think in the .js code I need something like:
    if($(this).is(‘:checked’)) {

    Any ideas from anybody here?
    Here’s my code which works to pop up the box but doesn’t check the checkbox.

    x

  114. hi i have one master page in which accroding to oyour code i put same div with button
    but when i click i didn’t get white model popup over there and whole screen becomes black. still i am able to click on other menu available in maste page. pleas suggest.

  115. Is it possible to make div follow after it has been already opened and not folowing? Or are only bPopup.close() and bPopup.reposition() available after popup has already opened?

  116. Hello,

    Great script! I need the popup auto open when the homepage is load. Is it possible? Can you show me how?

    Thanks!

  117. Hi,
    This is a beautiful thing. Thanks for sharing it.

    I’ve got 5 different popups I want to have on one page. The popups are 5 different images. I’ve gotten it to work by adding the code 5 times as shown below.

    While this works, I’m wondering if there’s a more elegant way to do it instead of repeating mostly the same code 5 times.

    I tried using the code once and putting $(‘#my-button’, ‘#my-button2’, ‘#my-button3’, ‘#my-button4’, , ‘#my-button5’) but that caused an unwanted issue where clicking on what should be only #2 ended up toggling through all 5 when clicking and closing on #2.

    Hope that makes sense! Regardless of whether there’s an answer to this — thanks again very much for sharing this solution.

    Here’s the code that works that I’m wondering if there’s a better way to accomplish:

    // Binding a click event
    // From jQuery v.1.7.0 use .on() instead of .bind()
    $(‘#my-button’).on(‘click’, function(e) {

    // Prevents the default action to be triggered.
    e.preventDefault();

    // Triggering bPopup when click event is fired
    $(‘#element_to_pop_up_1’).bPopup();

    });
    // Binding a click event
    // From jQuery v.1.7.0 use .on() instead of .bind()
    $(‘#my-button2’).on(‘click’, function(e) {

    // Prevents the default action to be triggered.
    e.preventDefault();

    // Triggering bPopup when click event is fired
    $(‘#element_to_pop_up_2’).bPopup();

    });
    // Binding a click event
    // From jQuery v.1.7.0 use .on() instead of .bind()
    $(‘#my-button3’).on(‘click’, function(e) {

    // Prevents the default action to be triggered.
    e.preventDefault();

    // Triggering bPopup when click event is fired
    $(‘#element_to_pop_up_3’).bPopup();

    });
    // Binding a click event
    // From jQuery v.1.7.0 use .on() instead of .bind()
    $(‘#my-button4’).on(‘click’, function(e) {

    // Prevents the default action to be triggered.
    e.preventDefault();

    // Triggering bPopup when click event is fired
    $(‘#element_to_pop_up_4’).bPopup();

    });
    // Binding a click event
    // From jQuery v.1.7.0 use .on() instead of .bind()
    $(‘#my-button5’).on(‘click’, function(e) {

    // Prevents the default action to be triggered.
    e.preventDefault();

    // Triggering bPopup when click event is fired
    $(‘#element_to_pop_up_5’).bPopup();

    });

  118. Hi!
    Nice Script, thanks!.
    I want to do something before closing,if the return is a ‘true’ closed,otherwise no treatment. How to do it?

  119. I’m new to jquery . I don’t know how to use and implement it in my existing html web page. Can you please share a sample page code wherein this jquery is implemented so I’ll know how to use it. Do I need to link any files or install something before running jquery ? Please reply ASAP

  120. Hi Bjørn!

    I understand you are busy, but I really hope you can find the time to give me answer on my problem as described above. I would really appreciate it.

    Thank you for your time!

    Regards,
    Mike

  121. Hi,

    works great, really cool stuff. And as always: Except… except when using Chrome on Android. Popup and overlay is OK, but it wont scroll with the page :/
    It is chrome 36.0.1985.131 . I cannot figure out, why 😐

    (Ps. Im the one who created a pull request with the resize option. Will you pull it? :))

    Thank you!

  122. Hi Bjørn!

    I managed to get your script working, though my PHP/JS knowledge is really, really bad. Almost non-existent… Haha.

    Anyways, I am experiencing one small problem. Hopefully you can help me with it. When someone clicks a link from the popup window, it will open the page inside the popup, however I don’t want this. How do / can I fix this? I just want to open the link in the mainpage (which is in the background).

    I noticed this question was asked before, but no answer / solution was given (or I missed it). Please advice when you have the time. Thank you in advance.

    Regards,
    Mike

    1. IS it because the link is inside an iframe inside the popup? Do you have a live example?

      1. Thank you for replying!

        Just learned a new word ‘Svar’ = Reply, right? 😛

        Anyways, yeah I use an iframe because I load a page in the popup.
        So this is the problem?

        I must admit, I don’t understand much of stuff like php, js, jquery, but I always try to make it work. Mostly I don’t have succes, but sometimes I do though.

        Is there another way to load the php page in the popup with the links working on the background page, instead within the popup iframe?

        Well the website is behind a .htaccess file (IP-restriction), cause I don’t want it live, but here is the code I use.

        In the head section:

        // Semicolon (;) to ensure closing of earlier scripting
        // Encapsulation
        // $ is assigned to jQuery
        ;(function($) {

        // DOM Ready
        $(function() {

        // Binding a click event
        // From jQuery v.1.7.0 use .on() instead of .bind()
        $('#colorButton').bind('click', function(e) {

        // Prevents the default action to be triggered.
        e.preventDefault();

        // Triggering bPopup when click event is fired
        $('#element_to_pop_up').bPopup({
        content:'iframe', //'ajax', 'iframe' or 'image'
        contentContainer:'.customcontent',
        loadUrl: 'pagetoload.php' //Uses jQuery.load()
        });
        jQuery('iframe').attr("width", 920);
        jQuery('iframe').attr("height", 400);
        jQuery('iframe').attr("scrolling","no", "frameborder","0");
        });
        });
        })(jQuery);

        In the body itself I use this:


        Popup button
        X

        So instead of using an iframe, as you mentioned, can I use a different way to load up the php page contents in the popup, but make it so that the links still focus on the background / main page.

        I hope I made myself clear, as English isn’t my native language…

        Thank you for your time! Highly appreciated.

        1. Damn… it didn’t show the body code correctly for some reason. :S

          Here is another try for the body part:

          Popup button
          X

          Sorry about the extra post. Hope it will show up now.

          1. Well that didn’t work… After re-reading your comment I tried commenting (correct name for it?) the following part:

            //content:’iframe’, //’ajax’, ‘iframe’ or ‘image’

            Since it worked perfectly with the iframe (except for the link ofcourse) and now it works flawlessly. I thought I tried this before and it didn’t work. Man I feel like a complete idiot wasting your time with my stupid things.

            Now I only need to correct the size of the popup, because it’s too small, but I doubt that will be hard, since it’s probably gonna changing some CSS somewhere…

            Sorry once again…

          2. Sigh… Without the iframe the contents which is loaded (with uses bootstrap stuff) messes up the background page.

            I think I will move back to the iframe version and just remove the links from it completely, because changing the bootstrap.css file is way, way too much work.

  123. Nice Script, thanks!.

    I cannot seem to get what I am trying to do to work though, which is bugging me. I want a hyperlink to open up a bPopup window,

    JQuery function

    //modal window PopUp

    $(function() {

    // Binding a click event
    // From jQuery v.1.7.0 use .on() instead of .bind()
    $('.PopUp').bind('click', function(e) {

    // Prevents the default action to be triggered.
    e.preventDefault();

    // Triggering bPopup when click event is fired
    $('.PopUp').bPopup({
    speed: 650,
    transition: 'slideIn',
    transitionClose: 'slideBack'
    });

    });

    })(jQuery);

    HTML

    I want this link to PopUp

    any troubleshooting tips are greatly appreciated!

  124. I am using b-popup in my application ,and in that popup I am showing a table which has dynamic length of rows ,but the problem here is for this popUP I am not getting the scroller to see the bottom data,please help me to come out this problem.
    I kept overflow:auto and scorle ,but no changes occures .
    Thanks
    @dinesh

  125. Please i m using your bpopup plugin its amazing. i have some problem in mobile site please give the idea of the width and height for the mobile site auto adjustment.

  126. I have implemented server side button inside the popup,
    however, when I click that button, it has no response…

  127. Is there a popup lib which automatically creates the popup’s container and injects the content? Why the heck should we stuff the code with placeholders and hide them?
    Just to make the extension a jQuery plugin?

  128. Hi,

    I m having trouble with keyboard events. When I use open the popup Overlay mask does not prevent keyboard interaction with underlying elements. Could you please provide a solution.

    My production day is very near and need a solution asap. Please help !!

    Thanks
    Sharma K

      1. Hi Could you please look into this issue of keyboard events triggering on parent window.

  129. Hi dinbror,

    I am having a problem while using you plugin. May be its my fault also. The Problem is after Opening one popup after again Iam getting the Old popup values in the new one. Ia there any method to destroy the popup after closing or any other way.

    Please help me in solving this.

  130. I’m trying to use this for a popup a DIV containing form elements – but I’m unable to fnd the relationship between the .bPopup() on the screen and the data elements in the DIV that contain my form data.

    Basic layout – form elements exist as ajax loaded, all JS is loaded with main page The popup is a div on a ajax loaded page.

    I can popup the div fine. I can close it down fine – I just cant access the content.

    When I click on the submit button (captured to a $(…).on(‘click’…) event ) the input element in my read with a $(“#fieldname”).attr(‘value’) .. always returning blank – regardless of what is on the screen.. (that field is in the DOM – Chrome’s debugger shows it to me fine)

    Popup DIV :

    Abort

    Submit

    Popup code, triggered from user activity:


    $('#ReverseUpdate-container').bPopup({
    modal: true,
    zIndex: 2 ,
    modalClose: false
    });

    Submit captured:


    $("body").on('click', '#ReverseUpdate-Submit', function () {
    var data = $("#Popup-input").attr("value");
    alert("new value:"+data); // always returns blank
    $('#Popup-container').bPopup().close();
    // where I would perform updates and deal with errors in a clean manner
    });

    I can clearly see on the screen that the data in the popup exists – which would seem to suggest you’re cloning the element being popped up – but I cant figure out how to access those elements to access the content of the popup

    Please explain the relationship between the screen and the popup element source – or tell me if I’m missing a more obvious way of handling pulling information out of the form elements…

  131. May I ask what can be packaged complete file to download it?? Contains CSS, images, DEMO file?

  132. Can anyone reply for this issue:

    I’m having a problem with the positioning (fixed). When the popup opens for the first time, it is not centered. Closing and reopening the popup fixes the positioning.

    Actually i have using the bpopup from another window.open.

    Thanks,
    Mohan

  133. Hi this is my kind request to you plz..also give code for handling “loadUrl” with in your code.. as i am not getting how to use that. As you have mention it uses jquery.load().
    Please give the proper code..i will be very thankfull to you as i am in finishing the shopping cart.

  134. Hi dinbror
    I saw your pop modal and it is really gr8 and very simple. I tried to use it in my web site. What i have to do in my web site is when the user click the Add To Cart button i wish to show the the select data on the bPopup. The thing is i tried with different file just for checking and it is working perfectly , the file contents are poping up inside the bPopup, but it is creating problem when clicked 1st time, it goes right side or bottom. When i click out side the popup then it disappear(thats correct , like Esc button is pressed), and when i click Add To Cart 2nd time bPopup appear exactly in the center of screen. When i shold do for this. Please provide the code, i am giving the code of mine..

    (function($) {

    // DOM Ready
    $(function() {

    // Binding a click event
    // From jQuery v.1.7.0 use .on() instead of .bind()
    $(‘#my-button’).bind(‘click’, function(e) {

    // Prevents the default action to be triggered.
    e.preventDefault();

    // Triggering bPopup when click event is fired
    $(‘#element_to_pop_up’).bPopup();
    $( “#element_to_pop_up” ).load( “mainmenu.php”);

    });

    });

    })(jQuery);

    does it need change, please guide me.
    Its very urgent i need to finish of my Shopping Cart.
    Thanks in Advance

  135. Hello, thank you very much for bpopup!! I have a question, is it possible to open a popup from an other popup and close the mother popup ? because i’m building a website in wich pages are popups but inside popups the menu is remainded and i want people to be able to navigate around the website even if they are in a popup
    thanks!

  136. Hi there , how are you ..

    In the Demo you were opening multiple popups one inside the other.

    Example 6a, misc: Multiple jQuery popups (Never ending popup, how many can you pop up?)

    Here when press escape all the popups are getting closed at time. Is there a way to close them in the order they are opened.

    Thanks
    Sharma K

  137. When bpopup is called the page scroll up to top position. I want to prevent this. How can I do that?

  138. Can you please give more example for AJAX ?
    Simple jQuery popup that loads external html page with ajax. (Ajax popup).

    Can you please use http://jsfiddle.net/ so that It will be easy for us to understand?

    please help

  139. this is my html code. This doesnot work. Please help me.
    —————————————————————————-


    POP IT UP

    Content of popup

    ; (function ($) {

    // DOM Ready
    $(function () {

    // Binding a click event
    // From jQuery v.1.7.0 use .on() instead of .bind()
    $(‘#my-button’).bind(‘click’, function (e) {

    // Prevents the default action to be triggered.
    e.preventDefault();

    // Triggering bPopup when click event is fired
    $(‘#element_to_pop_up’).bPopup();

    });

    });

    })(jQuery);

  140. Hi Dinbror,

    I am using bPopup inside asp.net update panel
    I refresh update panel every 15 seconds
    bPopup working fine until the update panel get refreshed
    When the update panel get refreshed, bPopup opening but not able to close
    It would be helpful if you suggest a solution

    Thanks & Regards,
    Prabu

  141. $(function(){
    $(‘.mod_btn’).click(function(){
    $(‘.test’).bPopup({
    content:’ajax’,
    closeClass:’code_back’,
    loadUrl:’child.html’
    });
    })
    })
    hello, i write this script, there is also a div whose class is “test” in this page and a button whose class is ‘code_back’ in child.html.
    my problem is it works only once. when i close the popdialog and trigger it second time, i got a “Uncaught TypeError: undefined is not a function” in chrome console.
    it’s weird ha?

  142. hello, it’s me again, i have solved the problem by using $(‘#idinparent’).bpopup({ content:’ajax’,loadUrl:’child.html’}) .in this case, the closeClass, either default b-close or customed by myself is working.

  143. hello,i use bpopup in a parentpage like this:
    $(‘#idinparent’).bpopup({ content:’iframe’,loadUrl:’child.html’})
    but how do i close the child.html?
    i have write X in the child.html,but it didn’t work.
    when i use $(‘#idinparent’).bpopup().close() in child.html, they report a error.
    thx

  144. Bjørn. I must congratulate you on this project. It is simple (amazingly small file) and is more robust than any other system of its kind I have run across. Thank you for your time and the work you have put into it. And thanks for sharing :~)

  145. trying to load an image without success.

    ; (function ($) {
    $(function () {
    $(‘#my-button’).bind(‘click’, function (e) {
    console.log(12)
    //var self = $(this), content = $(‘.photopopup’);

    e.preventDefault();
    $(‘element_to_pop_up’).bPopup({
    content: ‘image’, //’ajax’, ‘iframe’ or ‘image’
    //contentContainer: ‘.content’,
    loadUrl: ‘.PeleCardS.png’
    });
    });
    });
    })(jQuery);

    And nothing shows….
    Text i can popup, what am i doing wrong?

  146. Im having some troubles to load the popup automatically (without clicking button).
    What i need to change in the code? Can you paste me the entire code?
    Thanks!

  147. I think there is a problem with the “autoClose” – when it is set (let’s say to 5000), and the popup is closed manually before 5000ms, and then another popup is opened, then the overlay of the new popup is removed (due to the autoClose triggering).

    Is there a way to cancel the autoClose, when the popup is closed manually, so that it does not affect new popups?

    Thanks!

  148. Hi,

    your plugin is great, and I basically got it working. Alas, I have a small issue and cannot seem to find the reason:
    When opening the popup for the first time, everything is working as expected. But when it is opened again, the closing “X” Button will not appear again.

    The code is

    (html):

    X

    (javaScript):
    $(‘.thumb’).bind(‘click’,showPic);

    function showPic() {
    event.stopPropagation();
    var img_path = $(this).data(‘img’);
    $(‘#image_pop_up’).bPopup({
    content: ‘image’, //’ajax’, ‘iframe’ or ‘image’
    loadUrl: img_path,
    easing: ‘easeOutBack’, //uses jQuery easing plugin
    speed: 450,
    transition: ‘slideDown’
    });
    }

    Do you have any idea?

    Thank you,
    regards, Tom

  149. hello sir,

    I was not able to use your popup code, first I added jquery cdn link and then your popup code the I added the inbetween the body tag your popup code, but it is not popping out.

    please help
    regards
    kannan

  150. Hello Sir,
    I could not able to use it popup.


    POP IT UP

    Content of popup

    // Semicolon (;) to ensure closing of earlier scripting
    // Encapsulation
    // $ is assigned to jQuery
    ; (function ($) {

    // DOM Ready
    $(function () {

    // Binding a click event
    // From jQuery v.1.7.0 use .on() instead of .bind()
    $(‘#my-button’).bind(‘click’, function (e) {

    // Prevents the default action to be triggered.
    e.preventDefault();
    alert(‘wwe’);
    // Triggering bPopup when click event is fired
    $(‘element_to_pop_up’).bPopup({
    speed: 650,
    transition: ‘slideIn’
    });

    });

    });

    })(jQuery);

    I tried with mozilla firefox.
    Whatever you given example in this page http://dinbror.dk/bpopup/
    not working with me. please help

    regards
    kannan

  151. Hi Bjorn,
    Thank you for the lovely plug-in – bPopup.
    But I have an issue with loading external page content that if I try to open modal window for the second time, encountered with the issue – Error: Object doesn’t support property or method ‘bPopup’. Any help would be highly appreciable.

  152. Hello, I’m using your bPopup plugin for my website, it works and looks great but i have an issue with it . I have a dynamic populated table from a MySql database. Code below:

    echo ‘
    ‘.$statusimg.’

    Job #’.$bookingid. ‘ for ‘. $date_today.’
    Contact for ‘.$row[‘name’].’ : ‘.$row[‘phone_number’].’

    Confirm job
    Roger job

    Please roger the job at least 60 minutes before the pick up time

    ‘;

    And jQuery :

    $(‘.statusimg’).bind(‘click’, function(e) {

    // Prevents the default action to be triggered.
    e.preventDefault();

    // Triggering bPopup when click event is fired
    $(‘#booking-status’).bPopup({
    });
    });
    It work’s but only once per page , than if i want to pop them up again i have to reload the page. Any solutions ? Thanks

  153. Hi.

    This is such a great tool.

    But i’m having some issues… when i trigger the modal, the pops up perfectly, but there’s no overlay.

    When i open the console to check the code… Voila! the overlay appears…. so i don’t know what’s the failure.

    here’s a live demo: http://www.edwardalarcon.com/nuevo2

    Thanks!…

    Ps. I visited your sponsor like 10 times 🙂

      1. Jeez!, Thank you so much Bjørn… I’ll be waiting for the next version 🙂

        Again, thanks for the great tool…. works like a charm 🙂

        Greetings from Colombia.

  154. Hi Dinbror, it’s an wonderfull plugins. Could you advice me how to use it for content loading via ajax. Is there any example?

    Hoever, Thank you

    Shimul

  155. Hi,
    I want to use the bPopup plug-in together with the Quicksand-plugin (http://razorjack.net/quicksand/). Every element would have a button to open a popup with video. The popup works fine when I click the button, untill I use Quicksand. From that moment on, the button doesn’t respond anymore. Somebody who knows a solution for this?

    Thank you

  156. I want without re initialize popup overwrite different data on popup. It means only writes html on popup. No any re initialization of popup.

  157. Hi, great popup! Thanks for the work.

    I only have one problem. When I show the popup in chrome the overlay only appears the first time. If I close it and show it again the overlay only appears when I scroll all the way up and then all the way down. It is really weird. It seems to happen only in chrome and opera, is there any solution or it’s a bug in those browsers.

    Thank you!

    1. Hey David.

      It’s a bug in chrome and will be fixed within the next update (chrome v.35)

  158. Hi, Are you still supporting bPopup. I’m planning to use this in production environment.
    Asking this question since the last reply from you was on 04/03/2014.

    Nice plugin …

    Thanks
    Sharma K

    1. Hey Sharma.

      I’m still supporting it. Just really busy at the moment.

      But to answer your question. Create a function on the page you insert the iframe:

      function closePopup(){
      $(“#element”).bPopup().close();
      }

      and call that function from your iframe:
      window.parent.closePopup();

      Something like that. Hasn’t tested the code 😉

        1. Could I ask you for your code? Pulling my hair out with the exact same thing, and the code from dinbror doesn’t work for me.

          Will be very thankful for an answer.

      1. function closePopup(){
        $(“#element”).bPopup().close();
        $(‘.content’).html(”);
        }

      2. $(‘.model-popup-btn’).bind(‘click’, function(event) {
        $(#element).bPopup({
        followSpeed: 200,
        content:’iframe’,
        speed: 200,
        modalColor: bgcolor,
        onClose: function() {
        $(“iframe”).each(function() {
        var src= $(this).attr(‘src’);
        $(this).attr(‘src’,src);
        });
        }
        });
        });

  159. Hey,

    I was wondering if there is a way to popup a CSHTML file. I am using MVC 4 and I would like to display a page using bPopUp. This is what I have and it is not working for me.

    $(document).ready(function() {

    jQuery(“#calendar-button”).click(function() {
    $(“#calendar”).bPopup({
    contentContainer: “#calendar”,
    loadUrl: “@Url.Action(“Calendar”,”Game”)”
    });

    });
    });

  160. Hej,

    Er der mulighed for selv at give modals navne?

    Jeg har en popup på min side. Og derinde i er der en anden popup.
    Hvis jeg åbner den første popup, så får den en class der hedder __b-popup1__, og hvis jeg åbnede den anden popup via knappen inde i min første popup, så får den “__b-popup2__”. Men det gørden ikke altid!

    Lad os sige at den første popup hedder “biler”, og den anden popup hedder “audi”.
    Audi popupen åbnes ved at trykke på en knap i biler.

    Hvis jeg først lukker Audi-popupen ved at køre public function .close(), og så åbner Audi igen, så har den stadig __b-popup2__, hvis jeg så denne gang lukker den ved at trykke på X (close class), og åbner den igen, så får den classen __b-popup1__, og så har de pludselig samme modal. Det er ikke meningen.

    Så ja, er det en bug? Har jeg mulighed for at force et modal class name? 🙂

    1. Hej igen,

      Vil bare lige sige at jeg har lavet en midlertidig løsning. Når man sætter dens value, så i stedet for sætter jeg den til

      e=”__b-popup”+t+”__”+(Math.floor((Math.random()*10000)+1))+”__”+(Math.floor((Math.random()*10000)+1))+”__”+(Math.floor((Math.random()*10000)+1))+”__”

      Måske ikke den bedste løsning, men den virker da. Det kan godt være de begge hedder __b-popup1__, men den anden har nogle andre tal bagved. Chancen for at de får de samme tal er meget lille, så tror jeg holder mig til den her løsning, indtil at der kommer en mere officiel løsning. 🙂

  161. hi… i want to use an image as a button and a div should appear as pop up … can u help me?

  162. Hi, I need to close the popup from inside the IFrame. For example I m opening a popup using bPopup iframe option. On some event of the iFrame content say Click or Double Click need to close the popup. I wrote the below code but it is throwing “HirerchayRequest Error”.

    $(‘#poupName’, window.parent.document).bPopup().close();

    Please help !! In Urgent need for a solution.

    Thanks

  163. Hi,

    Thanks for the great popup plugin. I have used this plugin before to show images. But in my current website I need to show videos in the popup when user click on button. Still our website is in the development stage suddenly we have got new problem.
    The pop up is playing the youtube video properly in all major browsers but if I use the videos from our local server. it is working fine in chrome and firefox but not working in IE. Instead of playing the video it is showing the download popup in IE only.

    You can check the both cases using below urls. In the below page click on the “Watch Trailer Now” button to show the pop up.

    the page has youtube video link

    http://mpcs.freeserver.me/index.php?route=product/catalogproducts&path=100_103

    The page has video from our local server.

    http://mpcs.freeserver.me/index.php?route=product/catalogproducts&path=100_102

    The problem in IE only. how can we resolve this problem. if not suggest me any alternative plugins for this type of requirement like both from youtube and local server.

    Thanks in advance..

  164. Hello, excelent script, just one bug, the created modal window does not process normal submit buttons, only javascript submissions. Regards, Aniscartujo.

  165. Hi, small question. I am using your popup window like a confirmation popup window. And the function returns false or true according to the user choose. The problem is after popup window appears, the function does not wait until popup window gets closed. any idea for a solution.? Thanks regards

  166. Hi
    I liked your code very much thanks for giving such pretty good code to us here
    i am facing an issue with popup i want to put many popup divs in a page with text link where in the popup div again i want to keep the pdf reader when i am keeping separate divs to each button it does not displays accept first div of popup but when i clicking to next div it is not opening whats the issue ..where i am doing wrong

    first DIV
    PHYSICS

    x
    PDF READER SCRIPT GOES HERE

    again i want open second time but it is not opening accept first one
    CHEMISTRY

    xPDF READER SCRIPT GOES HERE

    Here is the javacode

    ;(function($) {
    $(function() {
    $(‘#my-button’).bind(‘click’, function(e) {
    e.preventDefault();
    $(‘#element_to_pop_up’).bPopup({
    fadeSpeed: ‘slow’,
    followSpeed: 1500,
    modalColor: ‘greenYellow’
    });
    });
    });
    })(jQuery);

    please help sir to sort it out these issue i just want to open popup at multiple buttons on each separate link

    thanks

  167. Hi,
    is it possible to “doMagic” after clicking “Close” button but before closing the popup?
    Something like confirmation for Close?

    1. onClose Event fires after the popup closes.Usage: $(‘element_to_pop_up’).bPopup({ onClose: function(){ //doMagic }}); Version 0.5.0

  168. Hej igen,

    Også mig der skrev ovenfor.

    Bare lige lidt mere information.
    Hvis jeg åbner den langsomme div, lukker den, og prøver at åbne den igen, så er den stadig langsom. Så det er ikke bare første gang, men hver gang.

    Diven indeholder en liste med scroll, men den er som sådan 329079 pixels høj. Den består af 7653 elementer.

    Håber at vi kan finde på en løsning. Det er til en lokal infoskærm for min virksomhed, hvor man skal have mulig for at vælge mellem alle de produkter vi har på lager.

    Endnu en gang tak på forhånd. Fedt script ellers! 🙂

    1. Hej Mox.

      Hvordan indlæser du den store liste i popup’en? Har du et live eksempel jeg kan se?

      1. Hej igen,

        Der er desværre ikke muligt at vise et live eksempel, da den ligger lokalt, og er tilkoblet en lokal demo database.

        Men det er bare en DIV, med en UL, og så inde i den UL er der 7000 LI, der hver især også indeholder et A tag. Altså rimelig mange elementer.

        Jeg har dog fundet ud af at jeg kan gøre den lidt hurtigere, ved at sætte UL-elementets display til none, lige inden jeg viser popupen, og så sætte dens display tilbage til normal når popupen er loadet, af en eller anden grund er det lidt hurtigere.

        Popupen bliver åbnet ved at man trykker på en knap på hjemmeside, du kan se koden til dette her http://codepad.org/pZQ51ylF

  169. Hej,

    Jeg bruger bPopup på min lokale hjemmeside, og det fungerer super godt. I hvert fald noget af tiden.

    Jeg har 3 forskellige ting, der kan trigger en bPopup. 2 af dem er bare en div, med noget information. Typisk en liste med cirka 1-10 elementer ().

    Men jeg har også en anden liste. En med MANGE elementer (læs tusinde). Når jeg prøver at åbne den, så går der cirka 10 sekunder på min PC, inden at den åbner. Og på min tablet går der cirka et minut inden den åbner.

    Er der nogen måde jeg kan få den til at åbne med det samme? Eller er det bare for meget information?

    Tak på forhånd.

  170. I have a problem when loading external html. The first time I open the popup, the content is not loaded. Closing and opening the popup again, the content is displayed.

    I’m using jQuery 1.11.0 and the latest version of bpopup.

    Thanks – Rico

  171. I’m having a problem with the positioning (fixed). When the popup opens for the first time, it is not centered. Closing and reopening the popup fixes the positioning.

    Thanks for your work – rico

    1. You can delete my comment – I could fix it with a bit of manual positioning. However, I have another problem, for which I will write a new comment. Thanks -rico

  172. It is possible open popup or can be opened automatically when added to a page? Eg. i read out my page and I need to make me jump out the window with image.

    1. Yes, just init it whenever you need it like:


      $('#element_to_pop_up').bPopup();

  173. Using a button I m trying to close the Popup with the method bPopup.close(). For First time the Popup is getting closed correctly. But when I open the same popup again and again the close() method is not closing the Popup for the first time. I have to click the button number of times to close the popup. Is this an issue or am I doing something wrong. Please help !

      1. I resolved the issue by removing the div element from DOM after closing the popup like below.

        $(‘#’ + options.name).bPopup().close();
        $(‘#’ + options.name).remove();

        Otherwise the bPopup close method alone is not working. May be you can take a look at it. Thanks for you response.

  174. I opened a pop up using bpopup.js and the pop up is in focus.
    How can I close the popup by clicking on a button in the popup window ?

  175. how can i make this popup on page load, i didnt need to click it, i will put it on my website and pop it up when i load the page. thank you so much:)

  176. Hi. I’m trying to make a popup like your demo 5a. So it works like this and looks the same. But I can’t get it working.

    Your fiddle example works, but I can’t make that work as 5a.

    Can you provide a fiddle example ? Thanks

    1. What is the issue?

      Be aware that due to browser security restrictions, most “Ajax” requests are subject to the same origin policy; the request can’t successfully retrieve data from a different domain, subdomain, or protocol.

  177. hi i posted comment before, but maybe it got deleted? i wish i could assign the position: attribute to my #id or #class so where the ahref link is i want it to bpopup below the link…

    ie: position: #mylink [-5, -10] something like that would be awesome!!

    or if you can tell me how to position it under my ahref link… i tried using: position: [$(this).offset().left – 400, $(this).offset().top + $(this).height()] BUT this does not work properly when using MULTIPLE popups over 50 (scroll bar)…

  178. hello,

    anyone can help me how to load a pop up after several seconds of my videos?

    here is my video script.

    jwplayer(“thePlayer”).setup({
    flashplayer: “player.swf”,
    file: “file.mp4”,
    height: “270”,
    width: “380”,
    autostart: true
    });
    jwplayer(‘thePlayer’).onTime(function(event) {
    if (event.position > 5 && event.position < 5.4) {
    this.pause();
    contentLockerShow();
    }
    });

  179. I tried to implement it. On one page it worked perfectly fine on the other the div was moved a little bit to the upper right. I used exactly the same code for the popup.

    X<iframe src="press/.html" style="width:100%; height:100%; border:none; margin:0px;">

    Why and how does this happen? And how do I fix it?

    1. Oh wait, it’s moved everytime but you can’t really see it when the popup is small. How can I center these popups? On your demopage the popups aren’t centered either. (I’ve tried it in Chrome and Firefox)

  180. New to Jquery and web development. I would like to use the bPopup control to display messages from code behind. Either a response message like “You inserted 12 rows into the database” or exception errors messages (message & stack trace)

    Do you have an example of setting the text value and initiating the popup control from code behind (C# or VB.Net)?

    Thank you in advance

  181. Hi,
    I would like to use bpopup in different iframes, but with bpopup.js declared only in main html page.
    The content window to be popup would be in the iframes html.
    Is there an easy way to do it, like puting the iframeId in some parameter ?

    (I’m not used with jquery syntax, sorry.
    element_to_popup and the button class=bb are in the iframe, but this function would be called on main page : )

    function initit(){
    ;(function($) {
    $(function() {
    $(‘.bb’).on(‘click’, function(e) {
    e.preventDefault();
    $(‘#element_to_pop_up’).bPopup({
    follow: [false, false], //x, y
    position: [‘auto’, 100] //x, y
    });
    });
    });
    })(jQuery);
    }

    thanks for any help.

  182. Hi,

    I love this plugin 🙂

    I just have one problem: I load content via jQuery .ajax()
    I put the returned data (the stuff, ajax has loaded) into my popUp-div (via .html(data))
    That works perfectly fine. And when I start the .ajax() function again, but this time inside the pop-Up div.

    That works as well, and the div also changes its width and height but the position doesn’t change. It’s not centered anymore. Only when I resize my Browser window, it centers again.

    Is there a way to center it automatically when the content changes?

  183. Hi i’m trying to make a div html element popup with your plugin but i keep havaing a black square behind my div element. Any way to get rid of the black square that frame the element to pop ?

  184. Hi,
    Is there any way i can find out if bpopup is open or not. If open, then i will fire close event. Please let me know if there is any help regarding this.

  185. Hi,
    Thanks for a good plugin

    I being seen the problem: How to add bPopup to
    please help me. thanks for support

  186. I absolutely love the popup and am integrating it into a site I will be launching within the week. I just noticed something that bothers me and am wondering if anyone has an answer for it:

    In the latest version of Chrome, if a popup is fired via a mouseover event, it doesn’t fade the screen behind the popup.

    If the popup is fired via a click event, it works fine and both events work fine in Safari. Any ideas?

    1. Has anyone else seen this issue? In the latest version of Chrome, when a popup is fired via a mouseover event, the screen behind the popup doesn’t darken to make the popup stand out.

  187. Hi,

    I am using b pop up scripts in my Salesforce application and everything works like a charm. But unfortunately doesn’t behave the same on IE 11. Does the script support IE 10 and above. I know it supports till IE 9.

      1. Hey Vinar.

        I just tested in IE11 on a win 8 desktop, no issues. The same goes for IE10. Have you tried my demo page in IE10/11?

  188. Thanks for the simple implementation! Covered my needs 99%. The 1% was adding a scroll to top (inside the modal div)
    After having loaded a large amount of (Ajax) content, and then scrolling down, I needed a button to scroll back to the top. Maybe its an event (like the close modal class) you could incorporate the next version 🙂
    Many thanks.

  189. Great work!

    Just wondering if you can handle a scrollable popup.

    Thx in advance and keep up the good job.

  190. I confirm my before post, when the height is a “tot” then the top of the popup become “0”, why?

    I would to have a popup with width and height like the 90% of the window.
    thanks

    1. Hey Oscar.

      Set the “amsl” option to zero:


      $('#element_to_pop_up').bPopup({
      amsl:0 //Above Mean Sea Level, default 50px
      });

  191. Good work, compliments.
    I setted the width and height of the popup, dinamically, that is, before open the popuop, I set the width and height to 80% and 90% (minus a custom height) of the window:

    $(‘#element_to_pop_up’).css(“width”, (windowWidth * 0.8) + “px”);
    $(‘#element_to_pop_up’).css(“height”, (((windowHeight – popupHeight))* 0.9 )+ “px”);
    $(‘#element_to_pop_up’).bPopup({
    speed: 650,
    transition: ‘slideIn’,
    modalColor: ‘#DDDDDD’
    });

    but the popup isn’t centered, the top always is “0”, why?

    thanks

  192. Hi, I’m kind of a newbie at coding, I’m working on a website with a photo gallery, I’d like the plugin to show the photo in a pop up with some html for the photo details and add some buttons for social networks and maybe a “buy” button…Do you guys think it’s possible?is there any tutorial you could point? Thank you 🙂

  193. Hi Dinbror

    First of all thank you very much for the awesome popup. Just have a question for you. I’m using MVC 4.0 and I’ve added a reference to your library just below the jQuery section on the page like this:

    $(document).ready(function () {
    $(‘#popup’).bPopup();
    });

    But when I try call the popup on document.ready() I get the following error – Object does not support property or method ‘bPopup’.

    What’s strange is that bPopup appears in the intellisense but for some reason it doesn’t get picked up in document.ready()

    If I change the code as follows then it works:

    $.getScript(“../../Scripts/jquery.bpopup-0.9.4.min.js”, function () {
    $(‘#popup’).bPopup({
    easing: ‘easeOutBack’, //uses jQuery easing plugin
    speed: 800,
    transition: ‘slideDown’
    });
    });

    Do you know why this happens?

  194. Nice script, thanks. Is there any simple way to reposition popup box after content change? e.g. i load lot of data, bpopup box takes entire screen, than i remove the data, bpopup height changes BUT its still glued to top even if there is plenty of space below after data removal, it should be centered on screen. thanks, piot

  195. Hello, i really like your script but i would to know how can i show this popup automatically on a opening page? Thank you!

  196. Great plugin can you put an option for submiting a loader gif in case of data loaded by ajax or external videos like youtube

    1. Hey LoneWOLFs.

      You can add the loader from the beginning and remove it again in the “loadCallback” callback.

  197. Hi, great popoup Dinbror!

    What’s the syntax to capture the button pressed inside the popup? Say a Yes, No, Cancel or Send button?

    Events/Callbacks are defined for the popup itself, is it possible at all?

    TIA.

    1. Hi Heco,

      Did you find any solution for this? I’m trying to get the click event in the code behind for a button placed in the pop up. I can get to the click event in the JQuery but not the code behind.

      Please let me know if you find anything.

      Thanks,
      RJ

  198. Hai How to use tis code…its not working and my browser console is showing error in ‘???’….how to use this
    $(‘element_to_pop_up’).bPopup({
    ???
    });
    I need to show an random popup display hence iam using this

    1. Hi Rohit,

      It’s not clear where the problem is. If the problem is whatever you mean ??? then you should read the API reference and use the values as defined; multiple values must be separated by a comma.

      If the problem is how to choose/use the random div, then several techniques are available. One could be having an array of possible div names and get one randomly as explained

      You must know something about the div you want to show as explained

      Use a variable, understand the code and adapt it to your needs.

      Regards.

  199. i what to close the popup through x or Esc button not on clicking of out side of popup

    1. hi
      i want to close the popup through x or Esc button not on clicking of out side of popup.

      thanq

      1. ESC should work out of the box. “X” just add the class “b-close” to the element.

        1. There is a bug in the iframe! When I close the window the sound of the YouTube iframe still plays in the background even though the video is closed, How do you kill the window entirely so that no sound plays after you click on the X button or the sides of the window?

    2. Chaitali,

      escClose [bool] (true) Should popup close when press on escape?
      modalClose [bool] (true) Should the popup close on click on overlay?

      $(‘#my-button’).on(‘click’, function (e) {
      e.preventDefault();
      $(‘#element_to_pop_up’).bPopup({
      appendTo: ‘body’,
      modalClose: false
      });
      });

      escClose value is not set as its default value is true.

  200. in this popup i m show in it dynamic data and after closing the popup it showing the same data two times.

    1. hello,
      i just have two small issues… am loading a login form into modal.. the form fits well into the window.. the issues are as follows
      1)the close button doesnt appears… i tried your css too but no luck.
      2)the whole modal window appears at the bottom of the screen.. it doesnt appears in the center as shown in your example….

      now i must feel like it might be because of the different stylings.. i have seperate form stylings..

      please kindly guide me

      thank you

  201. Hi – Great pop-up!!
    Question: Is it possible to disable the blur around the pop-up?

  202. I feel like a jerk. I just tried it and it worked fine. I can combine jq inside js no issues.
    For the rest of people, I put this in the parent js
    $(“#hiddenID”).bPopup().close(); // standard way to close bpopup.

    Thanks Dinbror. Great Tool!

  203. Hi Dinbror,
    I’m using the iframe option to pull up data, which after a selection in the iframe, I have it posting back to the parent document javascript (JS) function, which works fine. But what can I put in the parent JS to close the popup?

    I doubt combining jquery inside a regular JS would work. Maybe I have to convert the JS to jquery, but is the the only way to close bpopup? Guess I’m just not sure how to invoke functions across jq and js…

  204. I had some issues with the funtion close, doesn’t work with a youtube video, when i close the popup the sound keeps playing, please help, can u give me a example code un JSFIDDLE? that works, thnks

    1. Hi Santiago,

      I’ve got the very same problem here, and also reported on this blog but seems that nobody bothered to help. I sent an email to the plugin author but no reply since last month. I think the only solution is to find a more reputable plugin and wider forum help.

  205. Hello. I have used like 3 hours to try and get this to work, I finally got it right. I just want to let everyone know that if you hit the button and nothing happens and everything seem fine. Try and switch the references to the two libraries in your code. I had written the reference to jquery.bpopup before the reference to the original jquery library which gave no error message, it just didn’t work. Now it works, thanks a lot!

  206. Sorry Svar, no live example, I just made minor modification where I could and got it to do what I wanted, and I forget what/where it was. Still learning Jquery, so no expert here, only in Perl.

    Question, is there a way to pull the ID or Name of the button that activated the popup? I’m attempting conditional popups and using the same class. Otherwise I’d have to make each button have a unique ID/Class, and I’d rather not.
    Thank you.

  207. Hi,

    I put the code in master page and content page and go this error.

    JavaScript runtime error: Object doesn’t support property or method ‘bPopup’

    Any idea as to what the problem is?

    Thanks,

    1. It is because you did not include source code in to your site or you are trying to use the script before it was loaded. Check to see if you are including the source code and that you are calling your popup from within

      $(document).ready(
      function(){
      //your popup
      });

  208. I got a problem, I don’t know if it can be another way, I got a form, then the div I want to popup gets out of this element (form), so it causes me problems.

    Is there a way to prevent this?

  209. Hello ,

    Thanks for great popup.

    I am using it in my site but I have a problem. I want to open another popup when user clicks inside a link in existing popup.

    let me explain with a example , let in popup login form is opened and there is link for signup for new users , then users clicks on it login popup should be close and signup popup should be open.

    Please give me your suggestions.
    Thanks

  210. Another issue, depending on changes I make during testing. Sometimes the second click action acts differently than the first/original click action.

    1. Hey jb.

      Thanks for reporting. Do you have a live example I can see?

      You can use both bClose or b-close. Keeping bClose for a while as fallback for people who used an older version of bPopup and wants to upgrade.

  211. you have a few issues with height and width when using iframes, and bClose still being used instead of b-close

  212. Hi
    Is it ok if I ask how do I make the Multiple jQuery popups in popup that loads external html page with ajax

    thank you very much

    1. Hi
      Is it ok if I ask how do I make the Multiple jQuery popups in popup that loads external html page with ajax?

  213. Hi
    Is it ok if I ask for the #element_to_pop_up css that you use in the demo page? Which have a better X close button than the minimalist one in the jsfiddle.

    thanks

    RBK

    1. yes sure. You can just grap it from the demo page:


      .b-close {
      border-radius: 7px;
      font: bold 131% sans-serif;
      padding: 0 6px 2px;
      background-color: #2b91af;
      color: #fff;
      cursor: pointer;
      text-align: center;
      text-decoration: none;
      position: absolute;
      right: -7px;
      top: -7px;
      }
      .b-close:hover {
      background-color: #1e1e1e;
      }

  214. how to make bpopup as dynamic popup,means how to show dynamic value in bpopup.

    1. Hi Chaitali.

      It depends on what you want to add/show. There are many ways, so I need more info if I should help.

      1. how to add javascript variable or javascript value in bpopup…i want to show javascript variable value in bpopup

  215. Great popup but I can’t close it – I’m using it to display image and I want it to close when an image is clicked. I’ve tried $(“#pnlBGImages”).bPopup().close(); (pnlBGImages is the ID of the div that pops up) but it doesn’t work. I’ve tried .close(), .closeModal() but nothing seems to work. I thought I might get the answer viewing the source code of your demo page but I can’t find a call for the popup.

    1. Sorry, fixed this – it works fine. It was some unrelated code that was preventing it. Great job!

Leave a Reply

Your email address will not be published.