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.


  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.

        <head> ... </head>
            <!-- 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>

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. 

                // Triggering bPopup when click event is fired




Or with custom settings

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



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


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


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


Support bPopup by visiting my sponsor:

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



    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

    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?

  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.

  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?


    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

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


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


  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?


    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.


  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 () {

    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 () {
    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”);
    speed: 650,
    transition: ‘slideIn’,
    modalColor: ‘#DDDDDD’

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


  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.

    1. Hey Oscar.

      Set the “amsl” option to zero:

      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) {
    follow: [false, false], //x, y
    position: [‘auto’, 100] //x, y

    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.

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

  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


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


    Here is the javacode

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

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


  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


    The page has video from our local server.


    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.


  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


      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() {
    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 …

    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(){

      and call that function from your iframe:

      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


  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


    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 ‘

    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.

    // Triggering bPopup when click event is fired
    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.


    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.
    // Triggering bPopup when click event is fired
    speed: 650,
    transition: ‘slideIn’




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


  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

  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




    function showPic() {
    var img_path = $(this).data(‘img’);
    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?


  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?

  69. trying to load an image without success.

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

    content: ‘image’, //’ajax’, ‘iframe’ or ‘image’
    //contentContainer: ‘.content’,
    loadUrl: ‘.PeleCardS.png’

    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.

  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(){
    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,

  75. this is my html code. This doesnot work. Please help me.


    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.

    // Triggering bPopup when click event is fired




  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.

    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

  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.

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




    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.


  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 :



    Popup code, triggered from user activity:

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

    Sharma K

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

  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 .

  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.

    // Triggering bPopup when click event is fired
    speed: 650,
    transition: 'slideIn',
    transitionClose: 'slideBack'




    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.


    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.

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

        In the body itself I use this:

        Popup button

        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

          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!


  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.

    // Triggering bPopup when click event is fired

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

    // Triggering bPopup when click event is fired

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

    // Triggering bPopup when click event is fired

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

    // Triggering bPopup when click event is fired

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

    // Triggering bPopup when click event is fired


  98. Hello,

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


  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.


  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—“); }”
      Maxime DAVID

  103. Hi,

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


  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.


  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.

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

  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?

    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.

  108. 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:

    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″

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


  110. Hi,

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



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



    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.

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


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

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

    thx :)

  115. 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 :



    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.


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

    content:’iframe’, //’ajax’, ‘iframe’ or ‘image’
    modalClose: true,
    loadUrl: getButtonUrl(“create”), //Uses jQuery.load()
    position: [(0,0)]


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

  118. Best way to close bPopup is closeClass
    opacity: 0.75,
    speed: 500,
    closeClass : ‘dialog-close’

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



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

    // Triggering bPopup when click event is fired
    loadUrl: 'test.html' //Uses jQuery.load()






    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.


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

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


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

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

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

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

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

  127. 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) {
    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.


    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.

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

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

  130. I don’t want any transitions at all. i tried

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

    How can I remove opening transition

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

    Jaskaran Singh

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

    1. This is my js code:

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

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

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

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

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

    i dont want a trigger button put perhaps just a

  135. 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 () {
    }); //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.


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


  137. 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) {
    appendTo: ‘form’
    , zIndex: 2
    , autoClose: 7000 //Auto closes after 7000ms/7sec


  138. @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.

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


    1. small correction in the posted code block:

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

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

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


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

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

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

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

  145. 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(){

    }, o.delayedOpen);

  146. Hi Guys, I am using

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


    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 ?

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



    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)

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

    Any ideas? Thanks!

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

    <button class=”popup-button”
    <!– Element to pop up –>
    <div id=”element_to_pop_up”>
    <span class=”close-button”>X</span>
    <img src=”images/pic01.jpg”>
    <p>Vivamus fermentum nibh in augue praesent a lacus at urna congue rutrum wisi maecenas ligula.</p>

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

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

  150. 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() );
    onClose: function(){ $('html,body').scrollTop($.cookie('scrollLine')); }

    $('.close-button').on('click', function()


    This also worked for the close:

    $('element_to_pop_up').bPopup({onClose: function()

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

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

  153. 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:



    ;(function($) {

    $(function() {
    //* also jused ‘on’ instead ‘bind’ but no others results.
    $(‘#my-button’).bind(‘click’, function(e) {
    content:’image’, //’ajax’, ‘iframe’ or ‘image’

  154. 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) {
    modalClose: true,



    What’s the issue?

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

    source: [ “c++”, “java”, “php”, “coldfusion”, “javascript”, “asp”, “ruby” ]


    Thank you,
    regards Ronnie

  156. 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:

    follow: [true, true]

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

    If I make like this:

    position: ‘fixed’,
    follow: [true, true]

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

  157. 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(“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;

  158. 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) {


    onOpen: function () {

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



Skriv et svar

Din e-mailadresse 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>