Buat Dialog Box Lagi Yuk

Buat Dialog Box Lagi Yuk

Buat Dialog Box Lagi Yuk

infoalya.com

Assalamu'alaikum sahabat infoalya.com, setelah kemarin admin share tentang langkah-langkah membuat kotak info (dialog box) baca disini kali ini temanya masih sama. Yuk dilihat dulu demonya ya


Bagaimana menarik bukan ? Berikut ini langkah-langkah untuk membuatnya :

Sahabat infoalya.com saya anggap sudah berada di template editor, kemudian temukan  ]]></b:skin>   atau </style>   lalu kopi tempel CSS berikut diatasnya

#dialogoverlay{
 display: none;
 opacity: .7;
 position: fixed;
 top: 0px;
 left: 0px;
 background: #D8D8D8;
 width: 100%;
 z-index: 10;
}

#dialogbox{
 top: -300px;
 position: fixed;
 background: #6E6E6E;
 width:350px;
 z-index: 10;transition:all 400ms ease-in-out;box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75);
}

#dialogbox > div{
    background:#848484;
    margin:8px;
    text-align:center
}

#dialogbox > div > #dialogboxhead{
    background: #848484;
    font:18px Arial;
    font-weight:400;
    padding:10px;
    color:#efefef;
}

#dialogbox > div > #dialogboxbody{
    background:#222;
    padding:20px;
    color:#efefef;
    font:14px Arial;
    font-weight:400;
}

#dialogbox > div > #dialogboxfoot{
    background:#222;
    padding:0px;
    text-align:right;
}

#dialogbox > div > #dialogboxfoot button{
    position:absolute;
    top:-10px;
    right:-10px;
    background:#000;
    border:none;
    border-radius:50%;
    height:25px;
    width:25px;
    outline:none;
    color:#fff;
    line-height:25px;
    font:bold 16px Arial;
    text-align:center;
    cursor:pointer;
}

.buttonalert{
    background:#F78181;
    border:1px solid #ddd;
    margin:0 auto;
    padding:5px 18px;
    font:14px Arial;
    font-weight:700;
    color:#FFFFFF;
    text-align:center;
    display:inline-block;
    border-radius:3px;
    cursor:pointer;


Selanjutnya tempatkan HTML berikut dimanapun yang sesuai dengan keinginan sahabat infoalya.com

 <div id="dialogoverlay"></div>
<div id="dialogbox">
  <div>
    <div id="dialogboxhead"></div>
    <div id="dialogboxbody"></div>
    <div id="dialogboxfoot"></div>
  </div>
</div>
<div class='buttonalert' onclick="Alert.render('Bangga menjadi anak Indonesia.')">Custom Alert</div> 


Yang terakhir letakkan javascript dibawah ini diatas tag  </body>   atau </head>

 <script type='text/javascript'>
function CustomAlert(){
 this.render = function(dialog){
  var winW = window.innerWidth;
     var winH = window.innerHeight;
  var dialogoverlay = document.getElementById('dialogoverlay');
     var dialogbox = document.getElementById('dialogbox');
  dialogoverlay.style.display = "block";
     dialogoverlay.style.height = winH+"px";
  dialogbox.style.left = (winW/2) - (350 * .5)+"px";
     dialogbox.style.top = "150px";
     dialogbox.style.display = "block";
  document.getElementById('dialogboxhead').innerHTML = "Selamat datang di infoalya.com";
     document.getElementById('dialogboxbody').innerHTML = dialog;
  document.getElementById('dialogboxfoot').innerHTML = '<button onclick="Alert.ok()" title="Close this">&#215;</button>';
 }
 this.ok = function(){
  document.getElementById('dialogbox').style.top = "-300px";
  document.getElementById('dialogoverlay').style.display = "none";
 }
}
var Alert = new CustomAlert();
</script> 


Simpan template jika tahapan diatas telah selesai dan lihat hasilnya.

Share On:

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

0 Comment

Add Comment

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

https://infoalya.com

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - https://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Info Alya? Keep us running by whitelisting Info Alya in your ad blocker.

This is how to whitelisting Info Alya in your ad blocker.

Thank you!

×
×
×