Skip to content
Switch branches/tags

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

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>

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

<!-- Import jQuery 1.11.3-->
<script src=""></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 :


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.


You can add a selector when you initialize the popin :


or a jquery object

var button = $('#trigger');

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 :


... close it :


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


Other usages

You can pass a javascript object instead of a selector :

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

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

var popin = '<div id="popin"><p>Just another popin</p></div>';


A few options are available if you need them :

    triggers: '#trigger',
    closeSelector: '.close',
    position: 'middle',
    speed: 300,
    maskClick: true,
    beforeOpen: function(){},
    afterOpen: function(){},
    beforeClose: function(){},
    afterClose: function(){}
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.


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 :

    beforeOpen: function(popin, trigger){

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


A simple way to display popins on your project.



No releases published


No packages published