bPopup.js – A jQuery modal popup plugin

07.22.14: New release, bPopup version 0.10.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:

186 tanker om “bPopup.js – A jQuery modal popup plugin

  1. 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!

    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.

  2. 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;
      }

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

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

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

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

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

  8. 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
      });

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

  10. 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!

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

  12. 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…

  13. 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!

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

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

    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.

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

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

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

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

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

  21. 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?

  22. 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 :-)

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

  24. 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
      });

  25. Great work!

    Just wondering if you can handle a scrollable popup.

    Thx in advance and keep up the good job.

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

  27. 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?

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

  29. Hi,
    Thanks for a good plugin

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

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

  31. 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 ?

  32. 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?

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

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

  35. 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)

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

  37. 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)…

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

  39. 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:)

  40. 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 ?

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

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

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

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

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

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

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

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

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

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

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

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

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

  54. 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. :)

  55. 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”)”
    });

    });
    });

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

  57. 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)

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

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

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

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

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

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

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

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

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

  67. 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!

  68. 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!

  69. 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?

  70. 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 :~)

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

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

  73. $(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?

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

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

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

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

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

  79. 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!

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

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

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

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

  84. 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…

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

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

  87. 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?

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

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

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

  91. 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!

  92. 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? :P

        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.

  93. 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!

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

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

  96. 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?

  97. 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();

    });

  98. Hello,

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

    Thanks!

  99. 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?

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

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

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

  103. Hi,

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

    Regards

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

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

Skriv et svar

Din e-mail-adresse vil ikke blive offentliggjort. Krævede felter er markeret med *

Disse HTML koder og attributter er tilladte: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>