A simple way to display popins on your project.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
js
.gitignore
README.md
demo.html
longcat.png
marypopin.gif

README.md

jQuery Mary Popin

alt tag

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 a recent version of jQuery and the plugin :

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

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

then initialize the plugin like this :

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

That's it!

All you have to do is add some CSS.

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

Methods

You can add a selector when you initialize the popin :

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

or a jquery object

var button = $('#trigger');
$('#popin').marypopin(button);

Clicking on the element with the 'trigger' ID would open the popin.

There are a few other things you can do, like open a popin from anywhere in your page :

$('#trigger').click(function(e){
    e.preventDefault();
    $('#popin').marypopin('open');
});

... close it :

$('#some-other-link').click(function(e){
    e.preventDefault();
    $('#popin').marypopin('close');
});

... or recalculate it's vertical position (this can be useful if you need to change the popin's content while it's open) :

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

Other usages

You can pass a javascript object instead of a selector :

var popin = document.getElementById('popin');
$(popin).marypopin();

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

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

Parameters

A few options are available if you need them :

$('#popin').marypopin({
    triggers: '#trigger',
    closeSelector: '.close',
    position: 'middle',
    speed: 300,
    maskClick: true,
    beforeOpen: function(){},
    afterOpen: function(){},
    beforeClose: function(){},
    afterClose: function(){}
});
ParameterTypeDefaultDescription
triggersselector or jquery objectundefinedThe elements that will trigger the popin.
positionstring'middle'Vertical position. Possible values : 'middle', 'top'
closeSelectorselector'.close'Selector for the element(s) closing the popin on click (elements must be inside the popin element).
speednumber300Fade in / out speed in milliseconds.
maskClickbooltrueSet to true to allow popin closing when clicking outside of it
beforeOpenfunctionundefinedA function to execute before opening the popin.
afterOpenfunctionundefinedA function to execute after opening the popin.
beforeClosefunctionundefinedA function to execute before closing the popin.
afterClosefunctionundefinedA function to execute after closing the popin.

Warning

If you have fixed elements on you page that move a few pixels when opening the popin, you will need to add the "marypopin-fixed" class to these elements to prevent this.

More stuff

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 opened :

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

It can be useful if you need to load content inside the popin...