A little jquery plugin for simple and fast modal popup.

DEMO

Explanation :

1-As this plugin extends jQuery , you 1st have to include Jquery in your code THEN include the jquery leanModal plugin

 

2-You have to write an html popup somewhere in your html page

 

3-Create a trigger button

Either an html button, ie :
<a id="button_popup_login" rel="leanModal" name="signup" href="#popup_login">CLICK ME</a>

where href attribute targets the popup to show

Or a button with javascript :

$("#button_popup_login").leanModal({top : "50", closeButton: ".button_modal_close"});

where #button_popup_login is button id, top, position from top of screen, ".button_modal_close", the class of the closing button inside the popup

…………………………………

You can also display the leanModal popup at page start with javascript :

$("#popup_at_start").leanModal({mode: "auto"});

Or close automaticaly the displayed popup using javascript :

$("#popup_login").leanModal({mode: "close"});

4-Use css below for dark opaque screen behind popup

Use css below for dark opaque screen behind popup

…………………………………

Just copy/paste this code :

1-REQUIRES

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="http://www.softpeople.fr/wp-includes/js/jquery/jquery.leanModal.min.js"></script>

2-HTML

<!--TRIGGER BUTTON-->

<a id= »button_popup_login » rel= »leanModal » name= »signup » href= »#popup_login »>LAUNCH</a>

<!–POPUP ON CLICK–>

<div data-role= »popup » id= »popup_login » class= »ui-content invisible popups » >
<div class= »popup-header widget-header »>
<h3 class= »widget-title popup-title »>LOGIN</h3> <a class= »button_modal_close » href= »# »></a>
</div>
<DIV class= »popup_input »><input type= »text » name= »l_nickname » required id= »l_nickname » placeholder= »Nickname » value= » »/></DIV>
<DIV class= »popup_input »><input type= »text » name= »l_password » required id= »l_password » placeholder= »Password » value= » »/> </DIV>
<DIV class= »popup_input »><input type= »submit » name= »btn_valid_login » id= »btn_valid_login » value= »validate » /></DIV>
</div>

<!–POPUP AT START–>

<div data-role= »popup » id= »popup_at_start » class= »ui-content invisible popups » > Hello wolrd! </div>

3-JAVASCRIPT

<script>

/* CLOSE POPUP */

// $(« #popup_login »).leanModal({mode: « close »});

/* OPENS POPUP AUTOMATICALY */

$(« #popup_at_start »).leanModal({mode: « auto »});

/* DEFINE A BUTTON THAT OPENS POPUP ON CLICK*/

$(« #button_popup_login »).leanModal({top : « 50 », closeButton: « .button_modal_close »});

/* BUTTON TARGETS POPUP WITH href= »#popup_login » */</script>

4-CSS

<style>
#lean_overlay{
position: fixed;
z-index:100; top: 0px; left: 0px;
height:100%; width:100%;
background: #000;
display: none;
}

.popups{
width: 404px; padding: 12px; display:none;
background: #FFF;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px; box-shadow: 0px 0px 4px rgba(0,0,0,0.7);
-webkit-box-shadow: 0 0 4px rgba(0,0,0,0.7);
-moz-box-shadow: 0 0px 4px rgba(0,0,0,0.7);
}
.popup-header{
border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px;
}
.button_modal_close{
position: absolute;
top: 12px; right: 12px;
display: block;
width: 14px; height: 14px;
background: url(http://www.softpeople.fr/wp-content/uploads/2017/05/modal_close.png);
z-index: 2;
}

.popup_input{
padding: 5px 18px 5px 18px ;
}

</style>

…………………………………
this is a fork from initial git project ‘leanModal.js’ here