Cara Membuat Custom Modal Menggunakan HTML dan CSS – Part 2 – Setelah saya sudah pernah posting tentang cara menampilkan modal dengan bawaan dari bootsrap dan saya juga menambahkan animasi dari animate.css yang bisa sobat lihat disini. Pada kesempatan kali ini saya akan membuat modal sendiri dengan custom css yang tentunya bisa sobat ubah-ubah sendiri nantinya sesuai kreasi sobat. Oke langsung saja saya berikan contohnya.
Cara Membuat Custom Modal
1. Pertama kita perlu membuat file style.css dan isikan dengan kode dibawah
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 |
@import url('https://fonts.googleapis.com/css?family=Quicksand:400,700'); body{ background: #f1f1ff; font-family:Quicksand,sans-serif; text-align:center; } .card { width: 250px; border-radius: 5px; overflow: hidden; background: #fff; box-shadow: 3px 3px 18px -8px #263238; color: #424242; margin: 20px auto; padding: 20px; display: inline-block; } .modal-open { display: inline-block; border-radius: 10px; background: #4caf50; padding: 0px 20px; color: #fff; cursor: pointer; } .modal-label { position: relative; } .modal-radio { position: absolute; visibility: hidden; opacity: 0; } .modal { position: fixed; height: 100%; width: 100%; top: 0; left: 0; overflow: hidden; opacity: 0; transform: scale(0); transition: opacity .25s, transform .25s; z-index:99; } .modal2{ transform: scale(0.8) translate(0,-100%); transition: transform .35s,opacity .35s; } .modal3{ transform:translate(0,100%) scale(.9); } .modal4{ transform:scale(0) rotate(180deg); } #modal-open:checked + .modal { opacity: 1; transform: scale(1); } #modal-open2:checked + .modal2{ transform:scale(1) translate(0,0); opacity:1; } #modal-open3:checked + .modal3{ transform:scale(1) translate(0,0); opacity:1; } #modal-open4:checked + .modal4{ transform:scale(1) rotate(0deg); opacity:1; } .overlay { position: absolute; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); opacity: 0.3; top: 0; left: 0; } .modal .content { position: absolute; width: 70%; height: 300px; max-height: 70%; top: 10%; left: 15%; background: #fff; border-radius: 15px; box-shadow: 0 3px 15px -2px #222; padding: 20px; } .close-btn { position: absolute; width: 30px; height: 30px; top: 10px; right: 20px; border-radius: 50%; border: 2px solid #f44336; cursor: pointer; } .close-btn:after, .close-btn:before { content: ""; position: absolute; width: 70%; height: 2px; background: #f44336; left: 15%; top: 50%; top: calc(50% - 1px); transform-origin: 50% 50%; transform: rotate(45deg); } .close-btn:before { transform: rotate(-45deg); } .action-btn{ display:inline-block; padding: 10px 20px; background:#4caf50; color:#fff; border-radius:15px; cursor: pointer; } |
2. Kemudian buat file index.php dan isikan dengan kode berikut, namun sebelumnya saya pisahkan satu per satu karena ada 4 efek yang berbeda
a. Modal Standar
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<div class="card"> <div class="content"> <h4>Modal Standar</h4> <label class="modal-open modal-label" for="modal-open"><p>Lihat</p></label> <input type="radio" name="modal" value="open" id="modal-open" class="modal-radio"> <div class="modal"> <label class="modal-label overlay"><input type="radio" name="modal" value="close" class="modal-radio"/></label> <div class="content"> <div class="top"> <h2>Heading </h2> <label class="modal-label close-btn"> <input type="radio" name="modal" value="close" class="modal-radio"/> </label> </div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> </div> </div> </div> |
b. Efek muncul dari atas ke bawah
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<div class="card"> <div class="content"> <h3>Atas ke Bawah</h3> <label class="modal-open modal-label" for="modal-open2"><p>Lihat</p></label> <input type="radio" name="modal" value="open" id="modal-open2" class="modal-radio" /> <div class="modal modal2"> <label class="modal-label overlay"><input type="radio" name="modal" value="close" class="modal-radio"/></label> <div class="content"> <div class="top"> <h2>Heading </h2> <label class="modal-label close-btn"><input type="radio" name="modal" value="close" class="modal-radio"/></label> </div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> </div> </div> </div> |
c. Efek muncul dari bawah ke atas
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<div class="card"> <div class="content"> <h4>Bawah Ke atas</h4> <label class="modal-open modal-label" for="modal-open3"><p>Lihat</p></label> <input type="radio" name="modal" value="open" id="modal-open3" class="modal-radio" /> <div class="modal modal3"> <label class="modal-label overlay"><input type="radio" name="modal" value="close" class="modal-radio"/></label> <div class="content"> <div class="top"> <h2>Heading </h2> <label class="modal-label close-btn"><input type="radio" name="modal" value="close" class="modal-radio"/></label> </div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> </div> </div> </div> |
d. Efek muncul berputar
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<div class="card"> <div class="content"> <h4>Efek Putar</h4> <label class="modal-open modal-label" for="modal-open4"><p>Lihat</p></label> <input type="radio" name="modal" value="open" id="modal-open4" class="modal-radio" /> <div class="modal modal4"> <label class="modal-label overlay"><input type="radio" name="modal" value="close" class="modal-radio"/></label> <div class="content"> <div class="top"> <h2>Heading </h2> <label class="modal-label close-btn"><input type="radio" name="modal" value="close" class="modal-radio"/></label> </div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <label class="modal-label action-btn">OK<input type="radio" name="modal" value="close" class="modal-radio"/> </label> </div> </div> </div> </div> |
Jika berhasil maka kurang lebih tampilannya akan seperti gambar dibawah
Untuk selebihnya sobat bisa lihat pada demonya dibawah agar lebih jelas. Sekian postingan saya tentang Cara Membuat Custom Modal Menggunakan HTML dan CSS – Part 2. Jika ada salah-salah saya mohon maaf. Apabila ada pertanyaan maka bisa tinggalkan pada kolom komentar dibawah.
Baca juga :
Membuat Bootstrap Modal dan Animasinya pada PHP
Jika sobat ingin mendownload tutorial diatas maka sobat bisa klik link dibawah ini :