Cara Membuat Custom Modal Menggunakan HTML dan CSS - Part 2

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

@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

<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

<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

<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

<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.