Passionnés d'informatique depuis 1990

JQuery plugin for modal popup

Par le 29 mar 2017 dans Réalisations | 0 comments

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

Publiez une réponse

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>