PaPopup

Give a try

open a popup close a popup

Presentation

PaPopup is a plugin made purely in javascript to display and manage popups on multiple elements.

Demo & Doc→

A JavaScript popup manager

The normal version of PaPopup does not require jQuery

Usage

Basic Usage

PaPopup can be bound to an html element or even several elements :

<div class="papopup">click me to open popup</div>

Add the JavaScript to the end of your document:

<script src="papopup.js"></script>
<script>
    var pop = new PaPopup({
                popElem: ".papopup",
                popUrl: "http://pa-bru.fr"
              });
</script>

On click on one the concerned html element the popup is opened.

Open popup after init on PaPopup

To prevent the default event behavior (which is onClick on a popElem) set openAuto to false !

=> you can trigger the opening of the window with pop.open()

var pop = new PaPopup({
        openAuto: false, //you must create your own event handler to open the popup 
                popElem: ".papopup",
                popUrl: "http://pa-bru.fr"
});

/*code*/

popElem.addEventListener("click", function(e){
                        e.preventDefault();
                        pop.open(); // now you open the popup
}, false);

Close a popup

<div class="openPop">click me to open popup</div>
<div class="closePop">click me to close popup</div>
<script>
    var pop = new PaPopup({
            openAuto: true,
            popElem: ".openPop",
            popUrl: "http://pa-bru.fr"
    });

    /*the popup is opened on click on elements having class openPop*/

    var closePop = document.querySelectorAll(".closePop");
    closePop.addEventListener("click", function(e){
                e.preventDefault();
                pop.close(); // close the popup
    }, false);
</script>

Triggered events

var pop = new PaPopup({
    popElem: ".papopup",
    popUrl: "http://pa-bru.fr",
    onOpen: function() {
        console.log('run my onOpen callback function');
    }
});
var pop = new PaPopup({
    popElem: ".papopup",
    popUrl: "http://pa-bru.fr",
    onClose: function() {
        console.log('run my onClose callback function');
    }
});

Setters

You can add/remove/change properties of the papopup object after the init !

pop.setPosition("a position");
pop.setCustomMargin(marginTop, marginLeft);
pop.setPopOptions("options");
pop.setOnOpen(callback);
pop.setOnClose(callback);

Properties

Releases

v1.0 :

Author

Copyright © 2016 Paul-Adrien Bru | MIT license