Modal Dialog hanya dengan CSS

Modal dialog atau juga banyak yang menyebutnya dengan PopUp, biasanya dibuat dengan menggunakan Bootstrap, jQuery dan juga JS.
Namun, sederhananya bisa dibuat hanya dengan CSS saja.

Script Modal Dialog dengan CSS kali ini adalah menyambung dari bahasan yang sudah sudah, dengan cara yang sangat sederhana dan mudah tentunya.

Modal Dialog, atau PopUp kali ini murni hanya menggunakan HTML dan CSS saja, penasaran dengan scriptnya ?

Simak kode script Modal Dialog dibawah ini.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>CSS Modal Dialog</title>
	
<!-- CSS for Modal Dialog -->

<style>
body {
    background: #eee;
    font-family: verdana;
    color: #333;
}
h1, p {
    text-align: center;
}
/* Opened CSS Modal */
.btn {
    display: inline-block;
    text-decoration: none;
    margin-right: 10px;
    border-radius: 5px;
    padding: 8px 10px;
    background: #15C5FF;
    color: #FFF !important;
}

.btn:hover {
    background: #40C400;
}

/* Unopened CSS Modal */
.cssmodal {
    display: flex;
    position: fixed;
    left: 0;
    top: -100%;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    opacity: 0;
    -webkit-transition: top 0s .5s, opacity .5s 0s;
    transition: top 0s .5s, opacity .5s 0s;
}

/* Opened CSS Modal */
.cssmodal:target {
    top: 0;
    opacity: 1;
    -webkit-transition: none;
    transition: none;
}

/* CSS Modal content */
.cssmodal figure {
    width: 95%;
    max-width: 600px;
    position: relative;
    padding: 1.5em;
    opacity: 0;
    background-color: #fff;
    -webkit-transition: opacity .5s;
    transition: opacity .5s;
}

/* Dialog modal style */
.cssmodal.dialog figure {
    background: #fff;
    border-radius: 5px;
    padding-top: 10px;
}

/* Dialog modal h2 style */
.cssmodal.dialog figure h2 {
    margin-top: 0;
    padding-bottom: 5px;
    border-bottom: 1px solid #eee;
}

/* CSS Modal content when opened */
.cssmodal:target figure {
    opacity: 1;
}

/* style for small x link inside dialog modal */
.cssmodal.dialog .smallclose {
    text-decoration: none;
    position: absolute;
    right: 6px;
    top: 0px;
    font-size: 36px;
}

/* veil that covers page when CSS Modal is open */
.cssmodal .veil {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    position: fixed;
    background-color: rgba(0,0,0,.7);
    content: "";
    cursor: default;
    visibility: hidden;
    -webkit-transition: all .5s;
    transition: all .5s;
}

/* big "x" at the upper right corner inside veil */
.cssmodal .veil::before, .cssmodal .veil::after {
    content: "";
    display: block;
    position: fixed;
    width: 50px;
    height: 6;
    background: white;
    top: 50%;
    cursor: pointer;
    text-indent: -1000px;
    z-index: 10;
    top: 30px;
    right: 5px;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    -webkit-transition: all .5s;
    transition: all .5s;
}

/* veil style when CSS Modal is open */
.cssmodal:target .veil {
    visibility: visible;
}

/* animate veil "x"  when CSS Modal is open */
.cssmodal:target .veil::before, .cssmodal:target .veil::after {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.cssmodal:target .veil::after {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
a {
    color: #00f;
    text-decoration: none;
}
a:hover {
    color: #f00;
}
footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width:100%;
    font-size: 11px;
    padding-top: 5px;
    padding-bottom: 5px;
    background: #f7f7f7;
    text-align: center;
    border-top: 1px solid #999;
}
</style>

<!-- End of CSS Modal Dialog -->

</head>
<body>

<h1>Modal Dialog Dengan CSS</h1>

<!-- Button Modal Dialog -->

	<p>
		<a class="btn" href="#example1">Modal Dialog 1</a>
		<a class="btn" href="#example2">Modal Dialog 2</a>
	</p>
	
<!-- footer -->
	
	<footer>
		<a href="https://my-id.site" target="_top">2019 © My-ID.site</a>
	</footer>

<!-- Modal Dialog 1 Open -->

	<div class="cssmodal" id="example1">
		<a href="#" class="veil"></a>
			<figure>
				<p>Modal dialog sederhana dengan CSS. Silahkan di edit lagi CSS nya agar tambah keren.</p>
				<a href="#" title="Tutup Modal Box">Tutup Modal</a>
			</figure>
	</div>
	
<!-- Modal Dialog 2 Open -->

	<div class="cssmodal dialog" id="example2">
		<a href="#" class="veil"></a>
			<figure>
				<h2>Modal Dialog hanya dengan CSS <a href="#" class="smallclose" title="Tutup Modal Box">×</a></h2>
				Ini hanya menggunakan CSS dan HTML saja, tanpa jQuery dan JS, silahkan di edit ulang CSS nya agar tambah mantap.
			</figure>
	</div>
	
</body>
</html>


Saya yakin anda penasaran dengan hasilnya bukan ?
Ok langsung saja lihat hasilnya di Realtime HTML Editor ↗, dan Andapun bebas mengutak atik scriptnya untuk bahan belajar tentunya.

Mungkin hanya ini saja untuk bahasan kali ini, sampai jumpa di bahasan berikutnya, salam sukses selalu buat Anda semua.

Mungkin Anda Menyukai