Membuat Popup atau jendela layar sederhana

Diposting oleh pada tanggal

Membuat popup sederhana


Demo



Username: Password: Save my login.

CONTACT US

Silakan pilih salah satu untuk menghubungi saya. Pilihan:

Kita buat file html dulu



 
<div class="bodi">
<!--dibawah ini adalah tombol untuk menampilkan popup--!>

<center>
<div class="tombol">
<a onclick="masuk()"><button id="masuk">Login</button></a>
<br>
<a onclick="kontak()"><button id="kontak">Contact Us</button></a>

<script type="text/javascript"src="masuk.js"></script>
<script type="text/javascript"src="kontak.js"></script>
</div>
</center>


Lalu kita buat kode css, biar lebih menarik.



    
.tombol{background:rgb(255,255,170);width:auto;height:220;position:relative;border-radius:5px;display:block;border:2px rgba(00,50,200,0.5);box-shadow:0px 0px 20px #000000;padding:5px;top:10px;border:1px solid #808080;margin: 30px auto;}

#masuk, #kontak, #twitter, #facebook, #google, #email{background:rgb(135,206,235);width:auto;height:25;position:relative;border-radius:10px;display:block;border:2px #808080;color:black;}

#tutup{background:rgb(135,206,235);width:90px;height:25;position:relative;border-radius:10px;display:block;border:2px #808080;float:right;color:black;}


#bglogin{background:#ffffff;width:250px;height:auto;display:none;position:fixed;border:7px solid rgba(00,100,250,0.3);box-shadow:0px 0px 25px #808080;border-radius:5px;color:black;padding:10px;top:15%;margin:auto;}

.logintxt{background:rgba(255,255,200,10);border-radius:10px;width:200px;height:50;position:relative;display:block;padding:5px;}

#bgkontak{background:rgb(255,255,200);width:250px;height:auto;display:none;position:fixed;border:7px solid rgba(00,100,250,0.3);box-shadow:0px 0px 25px #808080;border-radius:5px;color:black;padding:5px;margin:auto;top:10%;}


Selanjutnya kita buat kode javascriptnya.


Untuk menampilkan menu login. 

    
    
       function masuk(){set=setInterval('up()','tutup()',500);}

function up(){d=document.getElementById('bglogin').style.display="block";clearInterval(set);}

function tutup(){d=document.getElementById('bglogin').style.display="none";clearInterval(set);}


Untuk menampilkan menu kontak

    
    
    
     
       function kontak(){set=setInterval('upkontak()','tutupkontak()',500);}
       
       function upkontak(){d=document.getElementById('bgkontak').style.display="block";clearInterval(set);}
       
       function tutupkontak(){d=document.getElementById('bgkontak').style.display="none";clearInterval(set);}


FULL KODE




<html>
<head>
<style>

.tmbl{background:rgb(255,255,170);width:auto;height:220;position:relative;border-radius:5px;display:block;border:2px rgba(00,50,200,0.5);box-shadow:0px 0px 20px #000000;padding:5px;top:10px;border:1px solid #808080;margin: 30px auto;}

#masuk, #kontak, #twitter, #facebook, #google, #email{background:rgb(135,206,235);width:auto;height:25;position:relative;border-radius:10px;display:block;border:2px #808080;color:black;}

#tutup{background:rgb(135,206,235);width:90px;height:25;position:relative;border-radius:10px;display:block;border:2px #808080;float:right;color:black;}


#bglogin{background:#ffffff;width:250px;height:auto;display:none;position:fixed;border:7px solid rgba(00,100,250,0.3);box-shadow:0px 0px 25px #808080;border-radius:5px;color:black;padding:10px;top:15%;margin:auto;}

.logintxt{background:rgba(255,255,200,10);border-radius:10px;width:200px;height:50;position:relative;display:block;padding:5px;}

#bgkontak{background:rgb(255,255,200);width:250px;height:auto;display:none;position:fixed;border:7px solid rgba(00,100,250,0.3);box-shadow:0px 0px 25px #808080;border-radius:5px;color:black;padding:5px;margin:auto;top:10%;}

</style>
</head>
<body>
<div class="bodi">
<!--dibawah ini adalah tombol untuk menampilkan popup--!>

<center>
<div class="tmbl">
<a onclick="masuk()"><button id="masuk">Login</button></a>
<br>
<a onclick="kontak()"><button id="kontak">Contact Us</button></a>

<script type="text/javascript"src="masuk.js"></script>
<script type="text/javascript"src="kontak.js"></script>
</div>
</center>
<!--dibawah ini untuk popup login--!>

<div id="bglogin">
<!--dibawah ini adalah tombol untuk menutup popup--!>
<a OnClick="tutup()"><button id="tutup">Close</button></a>
<hr>
<form>
Username:
<input class="logintxt" type="text"name="nama"placeholder="Nama Pengguna / E-mail"id="mnama">
Password:
<input class="logintxt" type="password"name="sandi"placeholder="Kata Sandi"id="mpass">
<input type="checkbox"name="simpan"checked>Save my login.
<input type="submit"id="masuk"value="Login">
</form>
</div>
</div>
<!--dibawah ini untuk popup contact--!>
<div id="bgkontak">
<!--dibawah ini adalah tombol untuk menutup popup--!>
<a OnClick="tutupkontak()"><button id="tutup">Close</button></a>
<hr>
<h4>CONTACT US</h4>
<p>Silakan pilih salah satu untuk menghubungi saya.

Pilihan:
<a onclick="twitter()"><button id="twitter">On twitter</button></a>

<a onclick="facebook()"><button id="facebook">On Facebook</button></a>

<a onclick="google()"><button id="google">On Google+</button></a>

<a onclick="email()"><button id="email">E-mail</button></a>
</p></div><script>
function masuk(){set=setInterval('up()','tutup()',500);}

function up(){d=document.getElementById('bglogin').style.display="block";clearInterval(set);}

function tutup(){d=document.getElementById('bglogin').style.display="none";clearInterval(set);} 

function kontak(){set=setInterval('upkontak()','tutupkontak()',500);}

function upkontak(){d=document.getElementById('bgkontak').style.display="block";clearInterval(set);}

function tutupkontak(){d=document.getElementById('bgkontak').style.display="none";clearInterval(set);} 

function policy(){pp=window.location.href='#';}

function tos(){toz=window.location.href='#';}

function twitter(){twt=window.location.href='#';}

function facebook(){fb=window.location.href='#';}

function google(){gg=window.location.href='#';}

function email(){em=window.location.href='#';}
</script>
</body>
</html>


Komentar

  1. Mas Ave29 November 2015 pukul 10.53

    mantap gan bisa dicoba nih
    www.katkit.net

    BalasHapus
  2. indoxxi-cinema19 April 2016 pukul 20.23

    klw popup nya seperti popads/popcash gitu gmn gan ?
    nonton movie

    BalasHapus
    Balasan
    1. 7 kilometer25 April 2016 pukul 18.49

      Maksudnya gimana ya gan? Popupnya ada dibagian bawah layar? Atau bagaimana? Mohon dijelaskan. . . Nanti jika saya bisa bantu. . Saya bantu deh. .

      Hapus
  3. Unknown6 Oktober 2016 pukul 18.18

    Ingin beruntung seperti temen-temen kamu?

    Langsung saja kamu mendaftar di AsliBandar dan rasakan permainan yang akan membuat hidupmu berwarna.

    Dengan Deposit yang terjangkau kamu berkesempatan menangkan Jackpot setiap harinya.

    Ingin beruntung seperti temen-temen kamu?

    Langsung saja kamu mendaftar di www.AsliBandar.net dan rasakan permainan yang akan membuat hidupmu berwarna.

    Dengan Deposit yang terjangkau kamu berkesempatan menangkan Jackpot setiap harinya.

    Untuk Info lebih lanjut silahkan menghubungi kami melalui :

    Pin BB : 2B3C34F4
    YM : Aslibandar_CS
    Skype : AsliBandar
    Telp : +855882388666
    FB : AsliBandar

    BalasHapus
  4. By_AF5 Desember 2016 pukul 07.54

    sedikit revisi min, itu untuk tutup komentar pada HTML keliru, hehe.
    tapi sippp jadi min, thanks..

    BalasHapus
    Balasan
    1. 7 kilometer5 Desember 2016 pukul 20.22

      Wahaha.. . Okay² terimakasih revisinya.. silakan dibenarkan sendiri jika ada yang salah :D

      Hapus
  5. michele wijaya27 Maret 2018 pukul 23.02

    Halo Bossku ^^
    Segera Daftarkan ID di skb288,com
    Menyediakan 7 Permain Hanya Dengan 1 ID
    Serta Tersedia Promo Menarik
    Bonus Turn Over Terbesar
    Bonus Refferal Seumur Hidup
    Minimal Deposit Hanya 20Rb
    BBM : D8E87241
    WA : +62 878 8707 6927
    Di Tunggu Kehadirannya Bossku ^^

    BalasHapus

Posting Komentar