Use jQuery Modal Dialog Item Side effects | Mas Andes Style

Use jQuery Modal Dialog Item Side effects - There are lots of ways to display a lightbox overlay with a variety of effects. Style lightbox to demonstrate the influence on the widget with a number of modern approaches, one which they are using is CSS changes and animations to create an influence on the current dialog package appears. Within the design with the user program, known since modal dialogs brand-new display eye-port dialog box that needs the user to communicate before they can be returned for the parent present operation, there by simply preventing your workflow in the primary view. On the net / blog site, Capital Dialogue is frequently used to display detailed photographs or other widgets, inside a pattern referred to as the Lightbox. Lightbox effect is frequently also termed "Modal Dialog Window" since the display window is frequently used to display the dialog box. In order to combine to make a dialog package with some kind of effect with your blog, here's how to utilize jQuery Modal Dialog with CSS changes and animation.

Put this code above </head>

<link href='http://desir.googlecode.com/svn/trunk/modal-dialog.css' rel='stylesheet' type='text/css'/> <script src='http://desir.googlecode.com/svn/trunk/moderizr-costum.js' type='text/javascript'/>
And This Code above </body>

<script type='text/javascript'> //<![CDATA[ var ModalEffects=(function(){function init(){var overlay=document.querySelector('.md-overlay');[].slice.call(document.querySelectorAll('.md-trigger')).forEach(function(el,i){var modal=document.querySelector('#'+el.getAttribute('data-modal')),close=modal.querySelector('.md-close');function removeModal(hasPerspective){classie.remove(modal,'md-show');if(hasPerspective){classie.remove(document.documentElement,'md-perspective')}}function removeModalHandler(){removeModal(classie.has(el,'md-setperspective'))}el.addEventListener('click',function(ev){classie.add(modal,'md-show');overlay.removeEventListener('click',removeModalHandler);overlay.addEventListener('click',removeModalHandler);if(classie.has(el,'md-setperspective')){setTimeout(function(){classie.add(document.documentElement,'md-perspective')},25)}});close.addEventListener('click',function(ev){ev.stopPropagation();removeModalHandler()})})}init()})(); (function(window){'use strict';function classReg(className){return new RegExp("(^|\\s+)"+className+"(\\s+|$)")}var hasClass,addClass,removeClass;if('classList'in document.documentElement){hasClass=function(elem,c){return elem.classList.contains(c)};addClass=function(elem,c){elem.classList.add(c)};removeClass=function(elem,c){elem.classList.remove(c)}}else{hasClass=function(elem,c){return classReg(c).test(elem.className)};addClass=function(elem,c){if(!hasClass(elem,c)){elem.className=elem.className+' '+c}};removeClass=function(elem,c){elem.className=elem.className.replace(classReg(c),' ')}}function toggleClass(elem,c){var fn=hasClass(elem,c)?removeClass:addClass;fn(elem,c)}var classie={hasClass:hasClass,addClass:addClass,removeClass:removeClass,toggleClass:toggleClass,has:hasClass,add:addClass,remove:removeClass,toggle:toggleClass};if(typeof define==='function'&&define.amd){define(classie)}else{window.classie=classie}})(window); //]]> </script>

Save Your Template
Example: Effect 1 - Fade in & Scale

<div class="md-modal md-effect-1" id="modal-1">
<div class="md-content">
<h3>Modal Dialog <a class="md-close">&#215;</a></h3>
<div>
<p>This Is Example Modal Dialog:</p>
<ul>
<li><strong>Example:</strong> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</li>
<li><strong>Modal:</strong> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</li>
<li><strong>Dialog:</strong> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</li>
</ul>
</div>
</div>
</div>

<!-- Button to display a modal dialog -->
<button class="md-trigger" data-modal="modal-1">Open Dialog</button>
<div class="md-overlay"></div>

DEMO For more Information visit : Mas-Andes Blog

SHARE US →

Tweet

8