Tutorial Blog Mas Andes Official - Tips Blogging | Trik Blogger | Tutorial Blogger | Widget Blogger | Blog Design | Taktik SEO (Search Engine Optimization)

Penggunaan Jenis Efek jQuery Modal Dialog

Penggunaan Jenis Efek jQuery Modal Dialog Penggunaan Jenis Efek jQuery Modal Dialog - Ada banyak cara untuk menampilkan lightbox overlay dengan bermacam efek. Seperti yang sedang ngetrend saat ini adalah pengggunaan style lightbox untuk menampilkan efek pada widget dengan beberapa cara modern yang salah satunya mereka gunakan adalah menggunakan CSS transisi dan animasi untuk membuat efek pada kotak dialog saat muncul. Dalam desain user interface, modal dialog dikenal sebagai jendela tampilan baru kotak dialog yang mengharuskan pengguna untuk berinteraksi sebelum mereka dapat kembali ke operasi tampilan induk, sehingga mencegah alur kerja pada tampilan utama. Di Web/blog, Modal Dialog sering digunakan untuk menampilkan gambar secara rinci ataupun widget lainnya, dalam pola yang dikenal sebagai Lightbox. Efek lightbox sering juga disebut Modal Window atau Modal Dialog karena tampilan jendela sering digunakan untuk menampilkan kotak dialog. Apabila ingin mengkombinasikan untuk membuat kotak dialog dengan beberapa macam efek pada blog anda, berikut adalah cara untuk menggunakan jQuery Modal Dialog dengan CSS transisi dan animasi.

Pertama masuk Edit HTML template dan pasang kode berikut ini di atas kode </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 pasang kode berikut ini di atas kode </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>
Kemudian Simpan template.

Struktur HTML modal dialog:
<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 menentukan 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
Agar lebih jelasnya dari masing-masing efek yang ada bisa dilihat pada halaman demo.
Demikian untuk tata cara menerapkan dan Penggunaan Jenis Efek jQuery Modal Dialog, Selebihnya bisa berkreasi sendiri di blog masing-masing.

Berlangganan artikel via email

66 Response to "Penggunaan Jenis Efek jQuery Modal Dialog"

Pertamaxnya saya amanin dlu ya mas

Balas

ganti template nih mas..buatan sendiri kayaknya..keren

Balas

assalammu'alaikum mas andes..mau tanya, seperti yang sering orang bicarakan dalam blogging,pemasangan jQuery tidak boleh lebih karena akan terjadi hank pada jQuery yang awal sudah terpasang, sehingga mengakibatkan blog lambat load..
pendapat mas andes untuk ini bagaimana..terimakasih

izin nyimak dulu, jika bisa kodenya saya akan coba perpendek, di bookmark dulu mas

Balas

boking satpam biar aman

Balas

request gan, saya ingin pasang lightbox FP FB, G+, Follow, blogwalking gan http://terselubung8.blogspot.com/

Balas

kan udah di jelasin di atas, pada baris ini
<p>Disini Isi Konten Kotak Dialog</p>
tinggal ganti dengan kode FP FB, G+, Follow, blog kamu

Balas

ya tergantung yang di pasang mbak, jQuery apa dulu. kan beda jQuery beda syntax. kalo tutorial di atas menggunakan modernizr.custom.js, itu fungsinya beda ama jquery-1.10.2.min.js atau versi dibawahnya. kalo pada baris var ModalEffects=(function() ini js ModalEffects dan baris bawahnya itu js classie

Balas

Keren, top markotop :)
Saya pelajari dulu Mas :)

Balas

Assalam muallaikum Mas Andes.. hhh belajar salam yang baik untuk tujuan yang baik akh :D
Setelah saya melihat DEMO nya ini sangat menarik buat di pajang di sidebar blog saya ya Mas
Sebagai pembungkus widget tentunya ini bisa yah Mas? tak coba terima kasih Mas Andes :-bd

Balas

Siap satpam pengaman datang untuk antisipasi hhh =D

Balas

beuhh ini template gagah bener hehe.. jadi kepincut asmara dengan wajah bau mas andes hehe wajah baru maksudnya :D

mantap deh ..hehe

Balas

Ini baru manteb mas,,penggunaan Light box overlay untuk modif blog

Balas

Nice !! Wah .............. Mas bro andes ganti template. Keren Mas :-)

Balas

nah itu tau buat pembungkus widget hohoho sip sipp :-bd mangga kang

Balas

acakadul dibilang gagah hohoho.. :D

Balas

iya mas kurang tepat kalo buat modif motor :D

Balas

baru masuk ke blognya saya sudah tebak kayak apa kontennya. ternyata bener, isinya rumus2 script. hehee.

Balas

cari blog di dashbor "faceblog evolution" :D kagak ketemu, setelah ketik "andes" ketemu dah... ini blognya ganti nama kok gak bilang-bilang :P

maap OOT.
mau tanya ini kenapa blogku dilaman sitemap ada peringatan "perangkat berbahaya" gitu ya..


coba ini kodenya bantu di cek, yang salah dimana

<div dir="ltr" style="text-align: left;" trbidi="on">
<script src="http://www.abu-farhan.com/script/daftarisiblogger/blogtoc-min.js"></script>
<script src="http://miztia-respect.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>
</div>

Balas

baru selesai baca postingannya ahaha

ini Effect 14 - 3D Rotate Bottom
coba diterapin ke blogku :) . dicoba dah entar.

Balas

kalo bilang2 ntar malah slametan :D

file js nya yang error ga bisa dibuka. ga taudeh itu isinya apaan..
https://lh4.googleusercontent.com/-oI_CgPlqdhM/UuoEqi0TQAI/AAAAAAAAAZY/F48eWkJVv78/h500/Untitled-1.gif
https://lh6.googleusercontent.com/-Mt3Ya9duKfE/UuoErHN3q3I/AAAAAAAAAZc/lHeb42BxiqE/h629/Untitled-2.gif

Balas

Klu saya malah lagi cari modal untuk masa depan mas..hehehehe

Balas

Semua sitemap yg pakai script dari dari abu-farhan..detect malware

Balas

mantep mas,langsung praktek deh :)

Balas

udah lama saya nggak berkunjung ke rumah mas andes. Ternyata sudah ganti ya rumah nya pakai template blues mulus hehehe :D

efek jquery ini boleh juga mas dipasang di blog saya. Biar keren ya mas :)

Balas

modal buat nikah kali mas Virlyz hihii

Balas

kayaknya ada yang beda nih tampilanya mas Andes ,tapi apanya yah,,,?? saya mau pelajari dulu mas ,takut soalnya saya masih belum begitu fahan nih,hehe....

Balas

iya ini mbak udah ganti template, gara2 efek pergantian tahun :)

Balas

orangnya mungkin kang yang tampil beda :D
santai aja kang ngga perlu pake takut :)

Balas

Mantap artikelnya mas..
sayangnya saya masih buta bahasa pemprograman,.
sebenarnya belajar Jquery, Css mudah ga? bagi saya yang gak pernah belajar Html dll.

Balas

semua tergantung niat mas.. kalo udah niat pasti mudah, tapi kalo ragu apalagi takut ya ngga bakal bisa :)
pelan2 nanti pasti bisa, saya juga belom sepenuhnya bisa dan masih perlu banyak belajar dari yang lain

Balas

baru nyadar klo blog ini dengan tampilan baru ;)

Balas

jadi lebih keren ya mas kalau kotak dialog ada efek jquery nya, sehingga ada animasi nya ya pada widget tersebut :)

Balas

Waww banyak pengalaman baru dan menarik disini yah Mas Andes
Ternyata kode script itu walaupun nampak Mati sebetulny hidup
Seperti Jquery ini. slam sejahtera Mas Andes :)

Balas

Oke deh Mas Andes siap coba praktek untuk menyelami artikel Keren :-bd
Ini lebih lanjut dan rinci agar saya sepandai Mas Andes akh hhhh :D =D

Balas

haha saya nggak pandai kang cuma seneng coba2 aja :D
tutorial selanjutnya insya allah saya bikin lebih detail dan rinci lagi kang supaya lebih mudah di pelajari

Balas

Asal jangan dibungkus ama kertas minyak kang hehehe, ntar jadi warteg

Balas

kunjungan petang kang...skalian minta modal

Balas

lama tidak online..tidak BW juga. Template mas andes jadi keren.. :D
Mantap mas... saya pengin belajar buat template juga.

Balas

Saya juga udah coba tipsnya untuk modfikasi Tab menu, sedikit rumit agar tampilan sesuai dengan blog saya, saya harus menambahkan CSS pada .md-trigger buat mengilangkan tampilan default...dan hasilnya juga waooow keren mas...cma kecepatan loading agak lambat sedikit..yg tadinya di GTMetrix 92% 91% jadi 91% 82%

Balas

sebenarnya kalo mau di pasang di menu kode .md-trigger{ ... } pada CSS di hapus juga tidak apa2 mas. itu hanya untuk custom button yang saya pasang saja.
penerapannya ke menu seperti biasa, hanya saja menambahkan class='md-trigger' <a href="#" class="md-trigger" data-modal="modal-1">Open Dialog</a>

Balas

biar ketinggalan yang penting HADIR... yang penting dapet nilai 7 hehehehehehee

Balas

sumpah keren abis gan :-d ... ijin bookmark nih...
thanks gan.. salam kenal

Balas

Mas kalau mau ngubah tampilan default dari botton-nya gimana?

Balas

atur pake CSS, contoh:button{
border: none;
background: #C0392B;
color: #fff;
font-size: 13px;
cursor: pointer;
display: inline-block;
border-radius: 2px;
margin: 5px;
padding: 10px;
}

Balas

Oh gitu ya, nambah ilmu, thanks mas :D

Balas

Assalamu'alaikum, alhamdulillah blog "panjenengan" sangat bermanfaat buat pemula seperti saya.
Untuk memunculkan dialog box di awal ketika halaman blog terbuka bagaimana mas caranya??? Mohon pencerahannya. Terima kasih.

Balas

cara kerjanya seperti pada tutorial ini mas:http://mas-andes.blogspot.com/2013/08/pop-up-facebook-like-box-with-lightbox.html

Balas

untuk mengatur lebar kotak nya gimana ya??

Balas

terima kasih dik , semua bekerja , saya sudah coba di beberapa template . izin nyimpan yah beberapa ilmunya di blog pribadi saya . salam buat adik , teruslah berkarya . serta salam juga buat adik adik diatas .

Balas
avatar
Anonymous

Bagaimana Anda melakukannya, Anda dapat membantu?

http://3.bp.blogspot.com/-br7aL8p8CSE/Uzw76jlOKHI/AAAAAAAAAD8/YKbshGH5zBw/s1600/contact.png

http://2.bp.blogspot.com/-Xc3QRbdn27A/Uzw79pzMQHI/AAAAAAAAAEE/_XtOQetgTaU/s1600/contact1.png

Balas

Sepertinya saya pengunjung perdana nih ke blog ini :D . dan kaya-nya rame banget di blog ini? mangstab kang.

Balas
avatar
Anonymous

Sebenarnya saya sudah bisa melakukan apa yang mas andes jelaskan di sini. Hanya saja Konten modal dialog yang akan di tampilkan tetap saja menimbulkan menghambat kecepatan loading blog saya, tidak seperti punya mas andes di sini. Jadinya untuk sementara Scriptnya saya simpan dulu.

Apakah ada CSS atau Jquery tambahan selain yang mas andes jelaskan di atas ?. Terima kasih.

Balas

Thanks gan... Tutorialnya sangat membantu...
ane coba dan Berhasil!! :D
Awesome!! (y)

Balas

Request mas andes bisa ga isi Konten nya itu, widget bawaan dari blog ?

Balas

mas, mau tanya...saya sudah coba kok tidak bisa....struktur HTML nya itu di taruh dimana nya ya mas kalau boleh tau. dibawah kode head atau body ,mohon penjelasannya mas. terimakasih

Balas

really useful to us

Balas

keren mas tpi ko panel ya jdi buram ya?

Balas

Mas,
Saya sudah coba,tapi kok jalan ya...?/?? saat di klik "Open Dialog" gak ada respon sama sekali. Apakah ada yang salah? salahyna dimana ya....padahal sudah sesuai petunjuk?

Terima kasih.


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

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

</head>
<body>

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

Balas

kalo ganti warna header (biru) di modal dialog, gimana caranya mas?

Balas

Bagaimana cara untuk memunculkannya setelah page loading selesai? Mohon Responnya

Balas

maaf sebelumnya mas, saya mau tanya klw mw nerapin untuk edit form gmn ya? mohon pencerahannya. mkch sebelumnya..

Balas

Hahaha Salam kenal bro
Iseng mampir sinih...
Tuh 404 semua filenya

Balas
  • Berkomentarlah dengan sopan dan bijak sesuai dengan isi konten.
  • Komentar yang tidak diperlukan oleh pembaca lain [spam] akan segera dihapus.
  • Apabila artikel yang berjudul "Penggunaan Jenis Efek jQuery Modal Dialog" ini bermanfaat, share ke jejaring sosial.
Konversi Kode