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

Just copy/paste this code :

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>

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>

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>

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>

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>