Demo

What is bPopup? bPopup is a lightweight jQuery modal popup plugin (only 1.49KB gzipped). It doesn't create or style your popup but provides you with all the logic like centering, modal overlay, events and more. It gives you a lot of opportunities to customize so it will fit your needs. It requires jQuery 1.4.3+ and has been tested in Internet Explorer 6*-9, Firefox 2+, Opera 9+, Safari 4+ and Chrome 4+. For a full list of settings, changes, comments and to download a given version go to http://dinbror.dk/blog/bPopup.

• = Removed IE6 support in bPopup version 0.6.0. If you still needs to support IE6 and want to use the newest version write and I'll help.

  1. HELLO WORLD Pop it up Example 1, default: Simple jQuery modal popup with default settings (Hello World popup)

      $('element_to_pop_up').bPopup();
     

  2. CUSTOM SETTINGS Pop it up Example 2a, custom settings: Simple jQuery popup with custom settings (Lazy popup, not going anywhere)

      $('element_to_pop_up').bPopup({
          follow: [false, false], //x, y
          position: [150, 400] //x, y
      });
     

  Pop it up Example 2b, custom settings: Simple jQuery popup with custom settings part 2 (Sticky popup)

        $('element_to_pop_up').bPopup({
            modalClose: false,
            opacity: 0.6,
            positionStyle: 'fixed' //'fixed' or 'absolute'
        });
  

  Pop it up Example 2c, custom settings: Simple jQuery popup with custom settings part 3 (Jamaican popup, relax man)

        $('element_to_pop_up').bPopup({
            fadeSpeed: 'slow', //can be a string ('slow'/'fast') or int
            followSpeed: 1500, //can be a string ('slow'/'fast') or int
            modalColor: 'greenYellow'
        });
  

  3. TRANSITIONS Pop it up Example 3a, transitions: Simple jQuery popup with slide down transition and easing (Falling popup)

      $('element_to_pop_up').bPopup({
      easing: 'easeOutBack', //uses jQuery easing plugin
          speed: 450,
          transition: 'slideDown'
      });
     

  Pop it up Example 3b, transitions: Simple jQuery popup with slide in transition (Formula one popup)

        $('element_to_pop_up').bPopup({
            speed: 650,
            transition: 'slideIn',
        transitionClose: 'slideBack'
        });
  

  4. EVENTS Pop it up Example 4, events: Simple jQuery popup that illustrates the different events (Events popup)

      $('element_to_pop_up').bPopup({
          onOpen: function() { alert('onOpen fired'); }, 
          onClose: function() { alert('onClose fired'); }
      }, 
      function() {
          alert('Callback fired');
      });
     

  5. CONTENT Pop it up Example 5a, content: Simple jQuery popup that loads external html page with ajax. (Ajax popup) 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.

      $('element_to_pop_up').bPopup({
          contentContainer:'.content',
          loadUrl: 'test.html' //Uses jQuery.load()
      });
     

  Pop it up Example 5b, content: Simple jQuery popup that loads an image (Image popup)

        $('element_to_pop_up').bPopup({
            content:'image', //'ajax', 'iframe' or 'image'
            contentContainer:'.content',
            loadUrl:'image.jpg'
        });
  

  Pop it up Example 5c, content: Simple jQuery popup that loads a page inside an iframe (Iframe popup)

        $('element_to_pop_up').bPopup({
            content:'iframe', //'ajax', 'iframe' or 'image'
            contentContainer:'.content',
            loadUrl:'http://dinbror.dk/blog' //Uses jQuery.load()
        });
  

  Pop a video Pop an image Pop some text Example 5d, content: Simple jQuery popup that loads X content defined on the buttons data attribute (Content popup)

        var self = $(this) //button
        , content = $('.content'); 
        
        $('element_to_pop_up').bPopup({
            onOpen: function() {
                content.html(self.data('bpopup') || '');
            },
            onClose: function() {
                content.empty();
            }
        });
  

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

      $('element_to_pop_up_1').bPopup({
          closeClass:'close1',
          follow: [false, false] //x, y
      });
      $('element_to_pop_up_2').bPopup({
          closeClass:'close2',
          follow: [false, false] //x, y
      });
      
      ...
      
      $('element_to_pop_up_N').bPopup({
          closeClass:'closeN',
          follow: [false, false] //x, y
      });
     

  Pop it up Example 6b, misc: Autoclose jQuery popup (Notification popup)

        $('element_to_pop_up').bPopup({
            autoClose: 1000 //Auto closes after 1000ms/1sec
        });
  

  Pop it up Example 6c, misc: Random jQuery popup (You never know what you get popup)

        $('element_to_pop_up').bPopup({
            ???
        });