Membuat Dialog Modal pada Halaman Tertentu di Blog
10 June 2015
Hai Hai Halo sobat Idblanter yang selalu setia menunggu update di blog keren ini. Nah sekarang saya akan memberikan tutorial cara membuat Dialog modal yang keren nih, tapi kali ini berbeda biasanya dialog modal itu muncul jika diklik tombol "Info" atau sejenisnya, nah kali ini Dialog ini akan muncul pada halaman tertentu (yang kita pilih sendiri). Style dialog ini ya gak keren-keren banget lah, cuma simple sederhana gitu, gak bikin blog lambat lah pastinya... kenapa? (karena ini tidak menggunakan javascript sedikitpun) waw Tanpa Javascript.
Dialog Modal ini akan muncul pada halaman yang sobat telah pilih agar dapat langsung memunculkan dialog ini setelah halaman terbuka, contohnya bisa sobat lihat disini.
Kira-kira begitulah style dan posisi dialog yang muncul pada halaman tersebut.
Atau sobat bisa lihat Demo lengkapnya pada tombol dibawah ini :
Dialog Modal ini akan muncul pada halaman yang sobat telah pilih agar dapat langsung memunculkan dialog ini setelah halaman terbuka, contohnya bisa sobat lihat disini.
Kira-kira begitulah style dan posisi dialog yang muncul pada halaman tersebut.
Atau sobat bisa lihat Demo lengkapnya pada tombol dibawah ini :
Nah keren bukan? pasti keren lah. Jika sobat tertarik untuk memasang Dialog modal pada halaman tertentu, ikuti tutorialnya di bawah ini....
Pertama adalah HTML letakan kode di bawah ini pada postingan atau halaman yang ingin di pasangkan dialog modal. Sebelum meletakan pilih mode HTML bukan COMPOSE.
Nah jika HTML telah selesai dipasang sekarang Pacarnya HTML nih, yaitu CSS, Letakan CSS dibawah ini tepat di bawah HTML yang baru saja sobat letakan pada postingan mode HTML.
Yang masih bingung mengenai Mode HTML. Mode HTML terletak pada bagian kiri atas Edit Entri/Entri Baru atau Edit Post/Post Baru.
Baca Juga : Membuat Dialog Box Dengan Custom Alert
Nah sekian dulu tutorial yang bisa saya bagikan kali ini, Semoga Bermanfaat.
Pertama adalah HTML letakan kode di bawah ini pada postingan atau halaman yang ingin di pasangkan dialog modal. Sebelum meletakan pilih mode HTML bukan COMPOSE.
<div id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button onclick='document.getElementById('myModal').style.display='none'' aria-hidden="true" id="closex" class="close" data-dismiss="modal" type="button">×</button>
<h4 class="modal-title" id="myModalLabel">
Modal title Here</h4>
</div>
<div class="modal-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="modal-footer">
<button onclick='document.getElementById('myModal').style.display='none'' class="btn btn-primary" type="button">Close</button>
</div>
</div>
</div>
</div>Nah jika HTML telah selesai dipasang sekarang Pacarnya HTML nih, yaitu CSS, Letakan CSS dibawah ini tepat di bawah HTML yang baru saja sobat letakan pada postingan mode HTML.
<style type="text/css">
/* CSS Dialog Khusus */
#myModal{background:rgba(8,8,8,0.88);position:fixed;top:0;right:0;width:100%;height:100%;z-index:9}.modal.in .modal-dialog{-webkit-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)}.modal.fade .modal-dialog{-webkit-transition:-webkit-transform .3s ease-out;-moz-transition:-moz-transform .3s ease-out;-o-transition:-o-transform .3s ease-out;transition:transform .3s ease-out;-webkit-transform:translate(0,-25%);-ms-transform:translate(0,-25%);transform:translate(0,-25%)}@media screen and (max-width:480px){.modal-dialog{top:0!important;left:0!important}}@media screen and (max-width:320px){.modal-dialog{top:0!important;left:0!important}}.modal-dialog{position:fixed;top:50px;left:300px;width:auto;margin:10px;width:700px;max-width:100%}.modal-content{position:relative;background-color:#fff;background-clip:padding-box;border:1px solid #999;border:1px solid rgba(0,0,0,.2);border-radius:6px;outline:none;-webkit-box-shadow:0 3px 9px rgba(0,0,0,.5);box-shadow:0 3px 9px rgba(0,0,0,.5)}.modal-header{min-height:16.42857143px;padding:15px;border-bottom:1px solid #e5e5e5}.modal-header .close{margin-top:-2px}button.close{-webkit-appearance:none;padding:0;cursor:pointer;background:transparent;border:0}.close{float:right;font-size:21px;font-weight:700;line-height:1;color:#000;text-shadow:0 1px 0 #fff;filter:alpha(opacity=20);opacity:.2}.modal-title{margin:0;font-size:150%!important;margin-bottom:-10px!important}.modal-body{position:relative;padding:20px}.modal-footer{padding:19px 20px 20px;margin-top:15px;text-align:right;border-top:1px solid #e5e5e5}.btn{display:inline-block;padding:6px 12px;margin-bottom:0;font-size:14px;font-weight:400;line-height:1.42857143;text-align:center;white-space:nowrap;vertical-align:middle;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-image:none;border:1px solid transparent;border-radius:4px}.btn-primary{color:#fff;background-color:#428bca;border-color:#357ebd}
</style>Yang masih bingung mengenai Mode HTML. Mode HTML terletak pada bagian kiri atas Edit Entri/Entri Baru atau Edit Post/Post Baru.
Baca Juga : Membuat Dialog Box Dengan Custom Alert
Nah sekian dulu tutorial yang bisa saya bagikan kali ini, Semoga Bermanfaat.