Bpopup

14jul/10176

29.10.11: New release, bPopup version 0.6.0

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.

Usage
Options (API)
Changelist
What can you do?
Downloads

Usage

This is a really simplified example. For using bPopup I recommend that you're familiar with HTML and CSS.

Scripts to include:

<script type="text/javascript" src="
   http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="jquery.bpopup-0.6.0.min.js"></script>

HTML:

<html>
  <head> HeadContent ... </head>
  <body>
    BodyContent
    ...
    <a id="click" href="some url">Click here</a>
    <div id="div_to_popup">Content of Popup</div>
  </body>
</html>

CSS:

#div_to_popup {display:none;}

The magic:

$(document).ready(function(){
   $("#click").bind('click', function(){
      $("#div_to_popup").bPopup();
      return false
   });
});

Or with custom settings

$(document).ready(function(){
   $("#click").bind('click', function(){
      $("#div_to_popup").bPopup({appendTo:'form', zIndex: 2});
   });
});

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'.
closeClass [string] ('bClose')	Class to bind the close event to. Version 0.3.3
content [string] ('ajax')	Content of bpopup. Types: ['ajax', 'iframe', 'xlink']. If loadUrl isn't defined it'll not use content type. Version 0.4.1
contentContainer [string] (null)	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
duration [int/string] ('normal')	Animation speed. Removed in version 0.3.6
escClose [boolean] (true)	Should popup close when press on escape?
fadeSpeed [int/string] (250)	Animation speed on fadeIn/out. Version 0.3.6
follow [boolean,boolean,boolean] ([true,true,false])	Should the popup follow the screen vertical and/or horizontal on scroll/resize? [vertical, horizontal, fixed on screen] Version 0.3.6. Changed in version 0.5.0 and again in version 0.6.0
followSpeed [int/string] (500)	Animation speed for the popup on scroll/resize. Version 0.3.6
loadUrl [string] (null)	External page or selection to load in popup. Version 0.3.4
minTop [int] (20)	Minimum distance from top to popup. Removed in version 0.3.6
modal [boolean] (true)	Should there be a modal overlay behind the popup?
modalClose [boolean] (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, [vertical, horizontal] Version 0.5.0
scrollBar [boolean] (true)	Should scrollbar be visible?
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')
zIndex [int] (9999)	Popup z-index, modal overlay = popup z-index - 1.

Events
onOpen	Event fires before the popup opens. Usage: $(selector).bPopup({ onOpen: function(){ //doMagic }}); Version 0.5.0
onClose	Event fires after the popup closes. Usage: $(selector).bPopup({ onClose: function(){ //doMagic }}); Version 0.5.0

Public Function
close()	Closes the popup (Usage: $(selector).bPopup().close()). Version 0.4.0

Changelist

0.6.0 change-list:

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:

Fixed issue: Added a duration time to the hide() call so onOpen and loadUrl always will be trigged when needed.
Fixed issue: 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:

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.
Fixed issue: 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:

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:

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:

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

0.3.5 change-list:

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

Downloads

v 0.6.0 developer
v 0.6.0 minified
v 0.5.1 developer
v 0.5.1 minified
v 0.5.0 developer
v 0.5.0 minified
v 0.4.1 developer
v 0.4.1 minified
v 0.4.0 developer
v 0.4.0 minified
v 0.3.6 developer
v 0.3.6 minified
v 0.3.5 developer
v 0.3.5 minified

Tagged som: bpopup, dialog, jquery, modal, overlay, plugin, popup 176 Kommentarer

dinbror blog

Bloggen er hjemsted for Bjørn Klinggaard. Her skriver jeg om ting jeg støder på igennem mine studier, arbejde eller fritid. Indlæggene kan være skrevet med henblik på egen læring eller som hjælp til andre. Smid gerne en kommentar eller et oplæg til diskussion, så vi kan få skabt noget synergi.

Forfølg mig her

Nye indlæg

Medlem af

Hvem glor – din bror Den ikke-så-personlige blog af Bjørn Klinggaard

dinbror blog

Forfølg mig her

Nye indlæg

Tags

Medlem af

Hvem glor – din bror Den ikke-så-personlige blog af Bjørn Klinggaard

bPopup

29.10.11: New release, bPopup version 0.6.0

Contents

Usage

Options

Changelist

What can you do?

Downloads

dinbror blog

Forfølg mig her

Nye indlæg

Tags

Medlem af