jQuery Mary Popin

A simple way to display popins on your project.

Demo (sorry about the aweful css).

Default usage

All you need is a trigger :

<a href="#" id="trigger">click to open popin</a>

and an element you want to use as your popin :

<div id="popin">
	<p>Hello World !</p>
</div>

don't forget to include the latest version of jQuery and the plugin :

<!-- Import jQuery 1.9.1-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.9.1.min.js"><\/script>')</script>

<!-- Import Mary Popin -->
<script src="js/jquery-mary-popin.js"></script>

then initialize the plugin like this :

$('#trigger').marypopin('#popin');

That's it ! Then all you have to do is add some CSS.

A new fullsize div with the id "popin-mask" is created at the end of the body tag. The popin element is placed inside that div.

Here are some base styles you can use :

html, body{
	height: 100%;
	position: relative;
	width: 100%;
}
#popin-mask{
	background-color: rgba(0,0,0,.5);
}
#popin{
	background-color: #fff;
	color: #000;
	margin: 0 auto;
	padding: 20px;
	width: 500px;
}

Other usages

You can pass a javascript element instead of a selector :

var popin = [document.getElementById('popin')];
$('#trigger').marypopin(popin);

You can even use a string containing your html as your popin :

var popin = '<div id="popin"><p>Just another popin</p></div>';
$('#trigger').marypopin(popin);

Parameters

A few options are available if you need them :

$('#trigger').marypopin('#popin', {
	position: 'middle',
	close: '.close',
	speed: 300,
	maskClick: true,
	beforeOpen: function(){},
	afterOpen: function(){},
	beforeClose: function(){},
	afterClose: function(){}
});

Parameter	Type	Default	Description
position	string	'middle'	Vertical position. Possible values : 'middle', 'top'
close	selector	'.close'	Selector for the element(s) closing the popin on click (elements must be inside the popin element).
speed	number	300	Fade in / out speed in milliseconds.
maskClick	bool	true	Set to true to allow popin closing when clicking outside of it
beforeOpen	function	undefined	A function to execute before opening the popin.
afterOpen	function	undefined	A function to execute after opening the popin.
beforeClose	function	undefined	A function to execute before closing the popin.
afterClose	function	undefined	A function to execute after closing the popin.

You might need to know what element triggered the popin in one of the functions, here's an example where we want to add a class to the trigger when the popin is closed :

$('#trigger').marypopin('#popin', {
	beforeClose: function(clickedElement){
		$(clickedElement).addClass('clicked');
	}
});

It can be useful if you need to make ajax calls inside the popin...