Cara Membuat Modal Dialog dengan Jenis jQuery di Blog ~ BLOG MINAN

Cara Membuat Modal Dialog dengan Jenis jQuery di Blog - tutorial ini sering digunakan oleh seseorang yang ingin menampilkan sebuah form, pengumuman, dll. Dengan menggunakan jQuery akan membuat tampilan nya akan modern.

Saya mendapatkan informasi ini dari Mas-Andes. Sekian lama saya mencari-cari bagaimana membuat sebuah informasi yang sangat modern. Sekarang akan saya share kepada sahabat BlogMinan yang ingin membuat Modal Dialog yang modern.

Lihat Demonya disini: DEMO

Tutoriannya sebagai berikut Cara Membuat Modal Dialog dengan Jenis jQuery di Blog:

Buka Blogger > Template > Edit HTML > masukkan kode dibawah ini dan letakkan tepat diatas </head>

<link href='http://mas-andes.googlecode.com/svn/trunk/modal-dialog.css' rel='stylesheet' type='text/css'/>
<script src='http://mas-andes.googlecode.com/svn/trunk/modernizr.custom.js' type='text/javascript'/>

Kemudian letakkan kode dibawah ini tepat diatas </body>

Baca Juga

<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>

Selanjutnya simpan templatenya.

Kemudian masukkan kode Modal Dialognya dibawah ini ditempat yang kamu inginkan:

<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>Disini Isi Konten Kotak Dialog</p>
        </div>
    </div>
</div>

<!-- Tombol untuk menampilkan modal dialog -->
<button class="md-trigger" data-modal="modal-1">Open Dialog</button>
<div class="md-overlay"></div>

class md-effect-1 dan ID modal-1 adalah tipe efek yang di gunakan (Konfigurasi lihat tabel).
<p>Disini Isi Konten Kotak Dialog</p> adalah isi dari kotak dialog.

Untuk masing-masing efek yang berbeda, lihat pada tabel konfigurasi dibawah ini:

class	id	effect
`md-effect-1`	`modal-1`	Fade in & Scale
`md-effect-2`	`modal-2`	Slide in (right)
`md-effect-3`	`modal-3`	Slide in (bottom)
`md-effect-4`	`modal-4`	Newspaper
`md-effect-5`	`modal-5`	Fall
`md-effect-6`	`modal-6`	Side Fall
`md-effect-7`	`modal-7`	Sticky Up
`md-effect-8`	`modal-8`	3D Flip (horizontal)
`md-effect-9`	`modal-9`	3D Flip (vertical)
`md-effect-10`	`modal-10`	3D Sign
`md-effect-11`	`modal-11`	Super Scaled
`md-effect-12`	`modal-12`	Just Me
`md-effect-13`	`modal-13`	3D Slit
`md-effect-14`	`modal-14`	3D Rotate Bottom
`md-effect-15`	`modal-15`	3D Rotate In Left
`md-effect-16`	`modal-16`	Blur
`md-effect-17`	`modal-17`	Let me in
`md-effect-18`	`modal-18`	Make way!
`md-effect-19`	`modal-19`	Slip from top