Ini hanya contoh saja karena sebenarnya untuk tampilan bisa dibikin sesuai selera sobat .. artinya kembali pada kreatifitas masing-masing. Kalau memang tertarik untuk mencicipinya silahkan sematkan CSS dan HTML dibawah ini kedalam template sobat .
Kustomisasi CSS dan HTML
CSS* =============================== */
.modal {
opacity: 0;
visibility: hidden;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
text-align: left;
background: rgba(0,0,0, .9);
transition: opacity .25s ease;
}
.modal__bg {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
cursor: pointer;
}
.modal-state {
display: none;
}
.modal-state:checked + .modal {
opacity: 1;
visibility: visible;
}
.modal-state:checked + .modal .modal__inner {
top: 0;
}
.modal__inner {
transition: top .25s ease;
position: absolute;
top: -20%;
right: 0;
bottom: 0;
left: 0;
width: 50%; /* lebar dan tinggi content
height: 30%;
margin: auto;
overflow: auto;
background: #fff;
border-radius: 5px;
padding: 1em 2em;
}
.modal__close {
position: absolute;
right: 1em;
top: 1em;
width: 1.1em;
height: 1.1em;
cursor: pointer;
}
.modal__close:after,
.modal__close:before {
content: '';
position: absolute;
width: 2px;
height: 1.5em;
background: #ccc;
display: block;
transform: rotate(45deg);
left: 50%;
margin: -3px 0 0 -1px;
top: 0;
}
.modal__close:hover:after,
.modal__close:hover:before {
background: #aaa;}
.modal__close:before {
transform: rotate(-45deg);
}
@media screen and (max-width: 768px) {
.modal__inner {
width: 90%;
height: 90%;
box-sizing: border-box;}}
CSS Button
.btn {
cursor: pointer;
background: #27ae60;
display: inline-block;
padding: .5em 1em;
color: #fff;
border-radius: 3px;
}
.btn:hover,
.btn:focus {
background: #2ecc71;
}
.btn:active {
background: #27ae60;
box-shadow: 0 1px 2px rgba(0,0,0, .2) inset;
}
.btn--blue {
background: #2980b9;
}
.btn--blue:hover,
.btn--blue:focus {
background: #3498db;
}
.btn--blue:active {
background: #2980b9;
}
HTML
<label class="btn" for="modal-1">Show me modal with a cat</label>
<label class="btn btn--blue" for="modal-2">Biru button</label>
<input class="modal-state" id="modal-1" type="checkbox" />
<div class="modal">
<label class="modal__bg" for="modal-1"></label>
<div class="modal__inner">
<label class="modal__close" for="modal-1"></label>
<h2>Caaaats FTW!</h2>
<p> Isi Konten </p>
</div>
</div>
Ya seperti itulah mungkin dalam membuat CSS modal box kali ini ...
Resource : KasperMikiwicz
wah2..trik2 yang dibagikan always keren deh pokoknya! saya pelajari dl mas, thanks ya
BalasHapusSependapat deh dengan Mbak Kiki saya Kang Ruly
HapusKasep pisan css modal box nya. salam sukses yah Kang :-bd
hehe tapi kasep keneh kang saud ah heuheu
HapusDuhh meuni GR Saya di bilang Kasep Baru 1 orang yang
HapusBilang saya Kasep yaitu Kang Ruly hhhheee :D
wkwkwk masa sih kang ah gak percaya ah hehehe
HapusSuer tekekewer Kang, Istri saya gak pernah bilang saya kasep =D
HapusAkh heureuy we Kang... biasa weh si ganteng kalem mah hhhh
brakatak .. bisa wae ah si akang mah
HapusWah ini tampilannya baru lagi ya kang..
BalasHapusKeren。。 Nih cuma sy liatnya lagi pke hp :)
itu lihat di hp mas Budi,sayamah lihat di TV hihihi
Hapusuntung teu dina layar tancep ge kang heuheu
Hapussimple dan ringan banget ya bro tampilannya
BalasHapuskunjungan perdana nih..
salam kenal dan sukses selalu
follback ya
zon-go.blogspot.com
ini hanya sekedar kerangka saja sob selebihnya saya serahkan kepada anda haha
HapusIni yang gw cari sob, nemu juga di mari ! :D keren pisan . haha
BalasHapuskemana aja kang ruli? kok jarang mampir ke blog ane :(
hah bisa aja euy ah hehe ...
Hapusjarang update kang .. kantos ah sababaraha kali
oh muhun tah aya ayeuna mah geuningan , boro ku abdi tos di sadiakeun kopi sareng kulub sampeu , eh semah na teu dongkap! -_- .
Hapuseh enya sakali deui ah hatur nuhun ieu di tampi kang , modal box pure css na ! kabeneran ti sasih kamari simkuring priyogi na teh :D . hehe
Kopi sareng kulub buyutukna mah katampi ...
Hapustapi ngabohong sesana mah wkwkwkwk
waqh makin mantab nih kayaknya pake modal dialog ya mas :-bd
BalasHapusya gitu deh kang ... cuma alakadar'y saja
HapusSangat bagus Kang Ruly setelah saya lihat DEMO nya kasep Pisan nya Kang
BalasHapusTapi rada keder nerapkeunana Kang. yah maklum masih diajar abi mah da :)
abdi percanten ka kang saud mah piraku master atuh .......
Hapuskang Ruly nggak pernah kehabisan tutor yah,mengalir seperti air ( bukan lahar dingin Kelud ) keren eunk ,tapi ini untuk template tertentu saja yah Kang,,,
BalasHapuswkwkwk .. dina template akang ge tiasa kang
Hapuskeren mas jenar.. hehe
BalasHapusmayan mas hehe
HapusSelamat sore Kang mampir lagi di Blog super Kasep ini dan simak lagi
BalasHapusKang Ruly artikel yang menarik, juga bermanfaat ini sepertinya cocok
Buat blog saya gak yah Kang. mendingan di coba akh biar keren ya Kang =D
sangat cocok mas saud .. nah biar tahu mending dicoba aja
Hapuscss memang keren yaa mas, selain mudah di pahami juga fast loading
BalasHapusthanks mas ilmunya, di tunggu yaa ilmu berikutnya :D
yups ... sama-sama di tunggu aja sob !!!
HapusMani keren pisan ey tutorialnya, Nu Aing tingali cukup mudah Tutorialnya, ngomong-ngomong eta CSS bikin berat loading blog Henteu ?
BalasHapusnaon blog na ge teu kapanggih ning ah ku dewek di teang teh wkwkwk
HapusLima jempol deh buat Kanr Ruly, keren kang :)
BalasHapusHujan sapopoe te raat2 gs erep kopi sangentong :D
sama kang didieu ge meni ngagebret kieu .. kopi dai kopi dai
HapusWah Infona Mantep Kang, Ditunggu Kunjungannya
BalasHapussip ...
Hapuslami tak pendak kang rul beuki sipp wae yeuh :-bd
BalasHapushaha mayan kang jang ukuran nu kolot mah
Hapuslangsung di pelajari deh mas jenar :D
BalasHapussilahkan mas bos !!
HapusKunjungan pagi Kang Ruly, pelajari lagi tentang pure css ini Kang
BalasHapusMasi bingung euy, kudu banyak belajar di Kang Ruly ini mah
Kang Punten sakedik oot, sae pisan pre syntax nya, kalau gak kebearatn
Bagi saya atuh, hayang da? nuhun di antos Kang Ruly hatur nuhun
coba akang cari di blog KI yang syntax prism .. untuk selanjutnya nanti ku sim abdi di wartosan atanapi sok we toong CSS kode na didieu ..
Hapuskreaksi juga mas, heheh lama gak nongol eh ternyata ada yang baru :-bd
BalasHapuscuma iseng-isneg aja sis daripada gak ada ide hehe
Hapus