Dialog Box Custom Page

infoalya.com


Assalamu'alaikum sahabat infoalya.com kali ini masih tentang dialog box tapi yang satu ini beda dengan yang kemarin, dialog box yang satu ini dapat di tempatkan pada laman statis, laman posting ataupun diatur sebagai widget.

DEMO
  

Untuk penerapan pada blog sahabat infoalya.com dapat meletakkan kode dibawah ini pada halaman statis jika hanya ingin menampilkan pada halaman statis tertentu, begitupula dengan halaman postingan blog, atur sebagai widget jika ingin menampilkan di semua halaman blog, kira-kira seperti itu penjelasannya.

<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>
<div id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button onclick='document.getElementById(&#39;myModal&#39;).style.display=&#39;none&#39;' 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">
Ini adalah contoh dialog box yang muncul saat loading /masuk di blog. Dapat diletakkan di laman statis, posting ataupun sebagai widget blog.
</div>
<div class="modal-footer">
<button onclick='document.getElementById(&#39;myModal&#39;).style.display=&#39;none&#39;' class="btn btn-primary" type="button">Close</button>
</div>
</div>
</div>
</div>


Mungkin itu yang dapat admin sampaikan untuk hari ini, semoga dapat membawa manfaat.

[+] Silahkan tinggalkan komentar
[+] Berkomertarlah dengan santun
[+] Mohon tidak meninggalkan live link
[+] Terima kasih untuk komentar anda

https://infoalya.com

Post a Comment (0)
Previous Post Next Post