Cara Menambahkan Modal/ Kotak Dialog pada Blog

Cara Menambahkan Modal/ Kotak Dialog pada Blog

  CSS, Javascript   10:44 AM

Modal/ Kotak Dialog

Modal atau yang lebih sering kita kenal dengan sebutan kotak dialog merupakan sebuah jendela munculan yang muncul setelah kita mengklik area tertentu atau sebuah tombol. Banyak yang salah kaprah mengartikan bahwa modal sama dengan popup. Setahu saya popup merupakan jendela iklan yang muncul ketika kita mengklik area pada web. Dan iklan tersebut menurut saya sangat mengganggu kenyamanan pengunjung blog kita.

Modal/ kotak dialog menurut saya penting ditambahkan di blog, disamping untuk memberikan pengumuman kepada pengunjung blog, dengan modal ini anda bisa menyisipkan script like facebook, embed video di youtube dll pada modal tersebut.

Hari ini saya akan berbagi beberapa efek jendela modal/ kotak dialog. Perlu agan ketahui ada banyak sekali efek transisi untuk menampilkan kotak dialog dan saya ingin menshare cara untuk menampilkan kotak dialog dan memberikan beberapa inspirasi.

Intinya adalah agan harus memiliki sebuah tombol pemicu yang akan membuat jendela modal muncul pada saat diklik menggunakan transisi sederhana (atau animasi). Untuk membuat tombol tersebut agan perlu menambahkan CSS berikut :
buttons {
 border: none;
 padding: 0.6em 1.2em;
 background: #c0392b;
 color: #fff;
 font-family: 'Lato', Calibri, Arial, sans-serif;
 font-size: 1em;
 letter-spacing: 1px;
 text-transform: uppercase;
 cursor: pointer;
 display: inline-block;
 margin: 3px 2px;
 border-radius: 2px;
}

buttons:hover {
 background: #A5281B;
}

Untuk memunculkan tombol diatas sisipkan html berikut.
<buttons class="md-trigger" data-modal="modal-5">Newspaper</buttons>
Keterangan : data-modal="modal-5" merupakan efek transisi yang kita pakai. Untuk penjelasannya akan saya jabarkan dibawah.

Berikut struktur HTML yang harus ditambahkan untuk menampilkan kotak dialognya. Silakan letakkan dibawah <body>
<div class="md-modal md-effect-1" id="modal-1">
    <div class="md-content">
        <h3>Modal Dialog</h3>
        <div>
            <p>This is a modal window. You can do the following things with it:</p>
            <ul>
                <li><strong>Read:</strong> Modal windows will probably tell you something important so don't forget to read what it says.</li>
                <li><strong>Look:</strong> modal windows enjoy a certain kind of attention; just look at it and appreciate its presence.</li>
                <li><strong>Close:</strong> click on the button below to close the modal.</li>
            </ul>
            <button class="md-close">Close me!</button>
        </div>
    </div>
</div>

Agar jendela kotak dialog tampil elegan tambahkan CSS berikut ini.
.md-perspective,
.md-perspective body {
 height: 100%;
 overflow: hidden;
}

.md-perspective body  {
 background: #222;
 -webkit-perspective: 600px;
 -moz-perspective: 600px;
 perspective: 600px;
}

.container {
 background: #e74c3c;
 min-height: 100%;
}

.md-modal {
 position: fixed;
 top: 50%;
 left: 50%;
 width: 50%;
 max-width: 630px;
 min-width: 320px;
 height: auto;
 z-index: 2000;
 visibility: hidden;
 -webkit-backface-visibility: hidden;
 -moz-backface-visibility: hidden;
 backface-visibility: hidden;
 -webkit-transform: translateX(-50%) translateY(-50%);
 -moz-transform: translateX(-50%) translateY(-50%);
 -ms-transform: translateX(-50%) translateY(-50%);
 transform: translateX(-50%) translateY(-50%);
}

.md-show {
 visibility: visible;
}

.md-overlay {
 position: fixed;
 width: 100%;
 height: 100%;
 visibility: hidden;
 top: 0;
 left: 0;
 z-index: 1000;
 opacity: 0;
 background: rgba(143,27,15,0.8);
 -webkit-transition: all 0.3s;
 -moz-transition: all 0.3s;
 transition: all 0.3s;
}

.md-show ~ .md-overlay {
 opacity: 1;
 visibility: visible;
}

/* Content styles */
.md-content {
 color: #fff;
 background: #e74c3c;
 position: relative;
 border-radius: 3px;
 margin: 0 auto;
}

.md-content h3 {
 margin: 0;
 padding: 0.4em;
 text-align: center;
 font-size: 2.4em;
 font-weight: 300;
 opacity: 0.8;
 background: rgba(0,0,0,0.1);
 border-radius: 3px 3px 0 0;
}

.md-content > div {
 padding: 15px 40px 30px;
 margin: 0;
 font-weight: 300;
 font-size: 1.15em;
}

.md-content > div p {
 margin: 0;
 padding: 10px 0;
}

.md-content > div ul {
 margin: 0;
 padding: 0 0 30px 20px;
}

.md-content > div ul li {
 padding: 5px 0;
}

.md-content button {
 display: block;
 margin: 0 auto;
 font-size: 0.8em;
}

Untuk efek transisinya silakan pilih salah satu yang agan suka. Setelah agan menemukan yang cocok kemudian tambahkan CSSnya.
/* Effect 1: Fade in and scale up */
.md-effect-1 .md-content {
 -webkit-transform: scale(0.7);
 -moz-transform: scale(0.7);
 -ms-transform: scale(0.7);
 transform: scale(0.7);
 opacity: 0;
 -webkit-transition: all 0.3s;
 -moz-transition: all 0.3s;
 transition: all 0.3s;
}

.md-show.md-effect-1 .md-content {
 -webkit-transform: scale(1);
 -moz-transform: scale(1);
 -ms-transform: scale(1);
 transform: scale(1);
 opacity: 1;
}

/* Effect 2: Slide from the right */
.md-effect-2 .md-content {
 -webkit-transform: translateX(20%);
 -moz-transform: translateX(20%);
 -ms-transform: translateX(20%);
 transform: translateX(20%);
 opacity: 0;
 -webkit-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
 -moz-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
 transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
}

.md-show.md-effect-2 .md-content {
 -webkit-transform: translateX(0);
 -moz-transform: translateX(0);
 -ms-transform: translateX(0);
 transform: translateX(0);
 opacity: 1;
}

/* Effect 3: Slide from the bottom */
.md-effect-3 .md-content {
 -webkit-transform: translateY(20%);
 -moz-transform: translateY(20%);
 -ms-transform: translateY(20%);
 transform: translateY(20%);
 opacity: 0;
 -webkit-transition: all 0.3s;
 -moz-transition: all 0.3s;
 transition: all 0.3s;
}

.md-show.md-effect-3 .md-content {
 -webkit-transform: translateY(0);
 -moz-transform: translateY(0);
 -ms-transform: translateY(0);
 transform: translateY(0);
 opacity: 1;
}

/* Effect 4: Newspaper */
.md-effect-4 .md-content {
 -webkit-transform: scale(0) rotate(720deg);
 -moz-transform: scale(0) rotate(720deg);
 -ms-transform: scale(0) rotate(720deg);
 transform: scale(0) rotate(720deg);
 opacity: 0;
}

.md-show.md-effect-4 ~ .md-overlay,
.md-effect-4 .md-content {
 -webkit-transition: all 0.5s;
 -moz-transition: all 0.5s;
 transition: all 0.5s;
}

.md-show.md-effect-4 .md-content {
 -webkit-transform: scale(1) rotate(0deg);
 -moz-transform: scale(1) rotate(0deg);
 -ms-transform: scale(1) rotate(0deg);
 transform: scale(1) rotate(0deg);
 opacity: 1;
}

/* Effect 5: fall */
.md-effect-5.md-modal {
 -webkit-perspective: 1300px;
 -moz-perspective: 1300px;
 perspective: 1300px;
}

.md-effect-5 .md-content {
 -webkit-transform-style: preserve-3d;
 -moz-transform-style: preserve-3d;
 transform-style: preserve-3d;
 -webkit-transform: translateZ(600px) rotateX(20deg);
 -moz-transform: translateZ(600px) rotateX(20deg);
 -ms-transform: translateZ(600px) rotateX(20deg);
 transform: translateZ(600px) rotateX(20deg);
 opacity: 0;
}

.md-show.md-effect-5 .md-content {
 -webkit-transition: all 0.3s ease-in;
 -moz-transition: all 0.3s ease-in;
 transition: all 0.3s ease-in;
 -webkit-transform: translateZ(0px) rotateX(0deg);
 -moz-transform: translateZ(0px) rotateX(0deg);
 -ms-transform: translateZ(0px) rotateX(0deg);
 transform: translateZ(0px) rotateX(0deg);
 opacity: 1;
}

/* Effect 6: side fall */
.md-effect-6.md-modal {
 -webkit-perspective: 1300px;
 -moz-perspective: 1300px;
 perspective: 1300px;
}

.md-effect-6 .md-content {
 -webkit-transform-style: preserve-3d;
 -moz-transform-style: preserve-3d;
 transform-style: preserve-3d;
 -webkit-transform: translate(30%) translateZ(600px) rotate(10deg);
 -moz-transform: translate(30%) translateZ(600px) rotate(10deg);
 -ms-transform: translate(30%) translateZ(600px) rotate(10deg);
 transform: translate(30%) translateZ(600px) rotate(10deg);
 opacity: 0;
}

.md-show.md-effect-6 .md-content {
 -webkit-transition: all 0.3s ease-in;
 -moz-transition: all 0.3s ease-in;
 transition: all 0.3s ease-in;
 -webkit-transform: translate(0%) translateZ(0) rotate(0deg);
 -moz-transform: translate(0%) translateZ(0) rotate(0deg);
 -ms-transform: translate(0%) translateZ(0) rotate(0deg);
 transform: translate(0%) translateZ(0) rotate(0deg);
 opacity: 1;
}

/* Effect 7:  slide and stick to top */
.md-effect-7{
 top: 0;
 -webkit-transform: translateX(-50%);
 -moz-transform: translateX(-50%);
 -ms-transform: translateX(-50%);
 transform: translateX(-50%);
}

.md-effect-7 .md-content {
 -webkit-transform: translateY(-200%);
 -moz-transform: translateY(-200%);
 -ms-transform: translateY(-200%);
 transform: translateY(-200%);
 -webkit-transition: all .3s;
 -moz-transition: all .3s;
 transition: all .3s;
 opacity: 0;
}

.md-show.md-effect-7 .md-content {
 -webkit-transform: translateY(0%);
 -moz-transform: translateY(0%);
 -ms-transform: translateY(0%);
 transform: translateY(0%);
 border-radius: 0 0 3px 3px;
 opacity: 1;
}

/* Effect 8: 3D flip horizontal */
.md-effect-8.md-modal {
 -webkit-perspective: 1300px;
 -moz-perspective: 1300px;
 perspective: 1300px;
}

.md-effect-8 .md-content {
 -webkit-transform-style: preserve-3d;
 -moz-transform-style: preserve-3d;
 transform-style: preserve-3d;
 -webkit-transform: rotateY(-70deg);
 -moz-transform: rotateY(-70deg);
 -ms-transform: rotateY(-70deg);
 transform: rotateY(-70deg);
 -webkit-transition: all 0.3s;
 -moz-transition: all 0.3s;
 transition: all 0.3s;
 opacity: 0;
}

.md-show.md-effect-8 .md-content {
 -webkit-transform: rotateY(0deg);
 -moz-transform: rotateY(0deg);
 -ms-transform: rotateY(0deg);
 transform: rotateY(0deg);
 opacity: 1;
}

/* Effect 9: 3D flip vertical */
.md-effect-9.md-modal {
 -webkit-perspective: 1300px;
 -moz-perspective: 1300px;
 perspective: 1300px;
}

.md-effect-9 .md-content {
 -webkit-transform-style: preserve-3d;
 -moz-transform-style: preserve-3d;
 transform-style: preserve-3d;
 -webkit-transform: rotateX(-70deg);
 -moz-transform: rotateX(-70deg);
 -ms-transform: rotateX(-70deg);
 transform: rotateX(-70deg);
 -webkit-transition: all 0.3s;
 -moz-transition: all 0.3s;
 transition: all 0.3s;
 opacity: 0;
}

.md-show.md-effect-9 .md-content {
 -webkit-transform: rotateX(0deg);
 -moz-transform: rotateX(0deg);
 -ms-transform: rotateX(0deg);
 transform: rotateX(0deg);
 opacity: 1;
}

/* Effect 10: 3D sign */
.md-effect-10.md-modal {
 -webkit-perspective: 1300px;
 -moz-perspective: 1300px;
 perspective: 1300px;
}

.md-effect-10 .md-content {
 -webkit-transform-style: preserve-3d;
 -moz-transform-style: preserve-3d;
 transform-style: preserve-3d;
 -webkit-transform: rotateX(-60deg);
 -moz-transform: rotateX(-60deg);
 -ms-transform: rotateX(-60deg);
 transform: rotateX(-60deg);
 -webkit-transform-origin: 50% 0;
 -moz-transform-origin: 50% 0;
 transform-origin: 50% 0;
 opacity: 0;
 -webkit-transition: all 0.3s;
 -moz-transition: all 0.3s;
 transition: all 0.3s;
}

.md-show.md-effect-10 .md-content {
 -webkit-transform: rotateX(0deg);
 -moz-transform: rotateX(0deg);
 -ms-transform: rotateX(0deg);
 transform: rotateX(0deg);
 opacity: 1;
}

/* Effect 11: Super scaled */
.md-effect-11 .md-content {
 -webkit-transform: scale(2);
 -moz-transform: scale(2);
 -ms-transform: scale(2);
 transform: scale(2);
 opacity: 0;
 -webkit-transition: all 0.3s;
 -moz-transition: all 0.3s;
 transition: all 0.3s;
}

.md-show.md-effect-11 .md-content {
 -webkit-transform: scale(1);
 -moz-transform: scale(1);
 -ms-transform: scale(1);
 transform: scale(1);
 opacity: 1;
}

/* Effect 12:  Just me */
.md-effect-12 .md-content {
 -webkit-transform: scale(0.8);
 -moz-transform: scale(0.8);
 -ms-transform: scale(0.8);
 transform: scale(0.8);
 opacity: 0;
 -webkit-transition: all 0.3s;
 -moz-transition: all 0.3s;
 transition: all 0.3s;
}

.md-show.md-effect-12 ~ .md-overlay {
 background: #e74c3c;
}

.md-effect-12 .md-content h3,
.md-effect-12 .md-content {
 background: transparent;
}

.md-show.md-effect-12 .md-content {
 -webkit-transform: scale(1);
 -moz-transform: scale(1);
 -ms-transform: scale(1);
 transform: scale(1);
 opacity: 1;
}

/* Effect 13: 3D slit */
.md-effect-13.md-modal {
 -webkit-perspective: 1300px;
 -moz-perspective: 1300px;
 perspective: 1300px;
}

.md-effect-13 .md-content {
 -webkit-transform-style: preserve-3d;
 -moz-transform-style: preserve-3d;
 transform-style: preserve-3d;
 -webkit-transform: translateZ(-3000px) rotateY(90deg);
 -moz-transform: translateZ(-3000px) rotateY(90deg);
 -ms-transform: translateZ(-3000px) rotateY(90deg);
 transform: translateZ(-3000px) rotateY(90deg);
 opacity: 0;
}

.md-show.md-effect-13 .md-content {
 -webkit-animation: slit .7s forwards ease-out;
 -moz-animation: slit .7s forwards ease-out;
 animation: slit .7s forwards ease-out;
}

@-webkit-keyframes slit {
 50% { -webkit-transform: translateZ(-250px) rotateY(89deg); opacity: .5; -webkit-animation-timing-function: ease-out;}
 100% { -webkit-transform: translateZ(0) rotateY(0deg); opacity: 1; }
}

@-moz-keyframes slit {
 50% { -moz-transform: translateZ(-250px) rotateY(89deg); opacity: .5; -moz-animation-timing-function: ease-out;}
 100% { -moz-transform: translateZ(0) rotateY(0deg); opacity: 1; }
}

@keyframes slit {
 50% { transform: translateZ(-250px) rotateY(89deg); opacity: 1; animation-timing-function: ease-in;}
 100% { transform: translateZ(0) rotateY(0deg); opacity: 1; }
}

/* Effect 14:  3D Rotate from bottom */
.md-effect-14.md-modal {
 -webkit-perspective: 1300px;
 -moz-perspective: 1300px;
 perspective: 1300px;
}

.md-effect-14 .md-content {
 -webkit-transform-style: preserve-3d;
 -moz-transform-style: preserve-3d;
 transform-style: preserve-3d;
 -webkit-transform: translateY(100%) rotateX(90deg);
 -moz-transform: translateY(100%) rotateX(90deg);
 -ms-transform: translateY(100%) rotateX(90deg);
 transform: translateY(100%) rotateX(90deg);
 -webkit-transform-origin: 0 100%;
 -moz-transform-origin: 0 100%;
 transform-origin: 0 100%;
 opacity: 0;
 -webkit-transition: all 0.3s ease-out;
 -moz-transition: all 0.3s ease-out;
 transition: all 0.3s ease-out;
}

.md-show.md-effect-14 .md-content {
 -webkit-transform: translateY(0%) rotateX(0deg);
 -moz-transform: translateY(0%) rotateX(0deg);
 -ms-transform: translateY(0%) rotateX(0deg);
 transform: translateY(0%) rotateX(0deg);
 opacity: 1;
}

/* Effect 15:  3D Rotate in from left */
.md-effect-15.md-modal {
 -webkit-perspective: 1300px;
 -moz-perspective: 1300px;
 perspective: 1300px;
}

.md-effect-15 .md-content {
 -webkit-transform-style: preserve-3d;
 -moz-transform-style: preserve-3d;
 transform-style: preserve-3d;
 -webkit-transform: translateZ(100px) translateX(-30%) rotateY(90deg);
 -moz-transform: translateZ(100px) translateX(-30%) rotateY(90deg);
 -ms-transform: translateZ(100px) translateX(-30%) rotateY(90deg);
 transform: translateZ(100px) translateX(-30%) rotateY(90deg);
 -webkit-transform-origin: 0 100%;
 -moz-transform-origin: 0 100%;
 transform-origin: 0 100%;
 opacity: 0;
 -webkit-transition: all 0.3s;
 -moz-transition: all 0.3s;
 transition: all 0.3s;
}

.md-show.md-effect-15 .md-content {
 -webkit-transform: translateZ(0px) translateX(0%) rotateY(0deg);
 -moz-transform: translateZ(0px) translateX(0%) rotateY(0deg);
 -ms-transform: translateZ(0px) translateX(0%) rotateY(0deg);
 transform: translateZ(0px) translateX(0%) rotateY(0deg);
 opacity: 1;
}

/* Effect 16:  Blur */
.md-show.md-effect-16 ~ .md-overlay {
 background: rgba(180,46,32,0.5);
}

.md-show.md-effect-16 ~ .container {
 -webkit-filter: blur(3px);
 -moz-filter: blur(3px);
 filter: blur(3px);
}

.md-effect-16 .md-content {
 -webkit-transform: translateY(-5%);
 -moz-transform: translateY(-5%);
 -ms-transform: translateY(-5%);
 transform: translateY(-5%);
 opacity: 0;
}

.md-show.md-effect-16 ~ .container,
.md-effect-16 .md-content {
 -webkit-transition: all 0.3s;
 -moz-transition: all 0.3s;
 transition: all 0.3s;
}

.md-show.md-effect-16 .md-content {
 -webkit-transform: translateY(0);
 -moz-transform: translateY(0);
 -ms-transform: translateY(0);
 transform: translateY(0);
 opacity: 1;
}

/* Effect 17:  Slide in from bottom with perspective on container */
.md-show.md-effect-17 ~ .container {
 height: 100%;
 overflow: hidden;
 -webkit-transition: -webkit-transform 0.3s;
 -moz-transition: -moz-transform 0.3s;
 transition: transform 0.3s;
}

.md-show.md-effect-17 ~ .container,
.md-show.md-effect-17 ~ .md-overlay  {
 -webkit-transform: rotateX(-2deg);
 -moz-transform: rotateX(-2deg);
 -ms-transform: rotateX(-2deg);
 transform: rotateX(-2deg);
 -webkit-transform-origin: 50% 0%;
 -moz-transform-origin: 50% 0%;
 transform-origin: 50% 0%;
 -webkit-transform-style: preserve-3d;
 -moz-transform-style: preserve-3d;
 transform-style: preserve-3d;
}

.md-effect-17 .md-content {
 opacity: 0;
 -webkit-transform: translateY(200%);
 -moz-transform: translateY(200%);
 -ms-transform: translateY(200%);
 transform: translateY(200%);
}

.md-show.md-effect-17 .md-content {
 -webkit-transform: translateY(0);
 -moz-transform: translateY(0);
 -ms-transform: translateY(0);
 transform: translateY(0);
 opacity: 1;
 -webkit-transition: all 0.3s 0.2s;
 -moz-transition: all 0.3s 0.2s;
 transition: all 0.3s 0.2s;
}

/* Effect 18:  Slide from right with perspective on container */
.md-show.md-effect-18 ~ .container {
 height: 100%;
 overflow: hidden;
}

.md-show.md-effect-18 ~ .md-overlay {
 background: rgba(143,27,15,0.8);
 -webkit-transition: all 0.5s;
 -moz-transition: all 0.5s;
 transition: all 0.5s;
}

.md-show.md-effect-18 ~ .container,
.md-show.md-effect-18 ~ .md-overlay {
 -webkit-transform-style: preserve-3d;
 -webkit-transform-origin: 0% 50%;
 -webkit-animation: rotateRightSideFirst 0.5s forwards ease-in;
 -moz-transform-style: preserve-3d;
 -moz-transform-origin: 0% 50%;
 -moz-animation: rotateRightSideFirst 0.5s forwards ease-in;
 transform-style: preserve-3d;
 transform-origin: 0% 50%;
 animation: rotateRightSideFirst 0.5s forwards ease-in;
}

@-webkit-keyframes rotateRightSideFirst {
 50% { -webkit-transform: translateZ(-50px) rotateY(5deg); -webkit-animation-timing-function: ease-out; }
 100% { -webkit-transform: translateZ(-200px); }
}

@-moz-keyframes rotateRightSideFirst {
 50% { -moz-transform: translateZ(-50px) rotateY(5deg); -moz-animation-timing-function: ease-out; }
 100% { -moz-transform: translateZ(-200px); }
}

@keyframes rotateRightSideFirst {
 50% { transform: translateZ(-50px) rotateY(5deg); animation-timing-function: ease-out; }
 100% { transform: translateZ(-200px); }
}

.md-effect-18 .md-content {
 -webkit-transform: translateX(200%);
 -moz-transform: translateX(200%);
 -ms-transform: translateX(200%);
 transform: translateX(200%);
 opacity: 0;
}

.md-show.md-effect-18 .md-content {
 -webkit-transform: translateX(0);
 -moz-transform: translateX(0);
 -ms-transform: translateX(0);
 transform: translateX(0);
 opacity: 1;
 -webkit-transition: all 0.5s 0.1s;
 -moz-transition: all 0.5s 0.1s;
 transition: all 0.5s 0.1s;
}

/* Effect 19:  Slip in from the top with perspective on container */
.md-show.md-effect-19 ~ .container {
 height: 100%;
 overflow: hidden;
}

.md-show.md-effect-19 ~ .md-overlay {
 -webkit-transition: all 0.5s;
 -moz-transition: all 0.5s;
 transition: all 0.5s;
}

.md-show.md-effect-19 ~ .container,
.md-show.md-effect-19 ~ .md-overlay {
 -webkit-transform-style: preserve-3d;
 -webkit-transform-origin: 50% 100%;
 -webkit-animation: OpenTop 0.5s forwards ease-in;
 -moz-transform-style: preserve-3d;
 -moz-transform-origin: 50% 100%;
 -moz-animation: OpenTop 0.5s forwards ease-in;
 transform-style: preserve-3d;
 transform-origin: 50% 100%;
 animation: OpenTop 0.5s forwards ease-in;
}

@-webkit-keyframes OpenTop {
 50% {
  -webkit-transform: rotateX(10deg);
  -webkit-animation-timing-function: ease-out;
 }
}

@-moz-keyframes OpenTop {
 50% {
  -moz-transform: rotateX(10deg);
  -moz-animation-timing-function: ease-out;
 }
}

@keyframes OpenTop {
 50% {
  transform: rotateX(10deg);
  animation-timing-function: ease-out;
 }
}

.md-effect-19 .md-content {
 -webkit-transform: translateY(-200%);
 -moz-transform: translateY(-200%);
 -ms-transform: translateY(-200%);
 transform: translateY(-200%);
 opacity: 0;
}

.md-show.md-effect-19 .md-content {
 -webkit-transform: translateY(0);
 -moz-transform: translateY(0);
 -ms-transform: translateY(0);
 transform: translateY(0);
 opacity: 1;
 -webkit-transition: all 0.5s 0.1s;
 -moz-transition: all 0.5s 0.1s;
 transition: all 0.5s 0.1s;
}

Untuk langkah yang terakhir tambahkan kode html dan script berikut diatas </body>
<div class='md-overlay'/>
<script src='http://racana.undip.ac.id/code/modal/js/classie.js'/>
<script src='http://racana.undip.ac.id/code/modal/js/modalEffects.js'/>

Sekian share cara menambahkan modal/ kotak dialog di blog, semoga bermanfaat.

Share this:

Related Posts:
Penulisan markup di komentar
  • Untuk menulis huruf bold silahkan gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic silahkan gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline silahkan gunakan <u></u>.
  • Untuk menulis huruf strikethrought silahkan gunakan <strike></strike>.
  • Untuk menulis kode HTML silahkan gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silahkan parse dulu kodenya pada kotak parser di bawah ini.
Show Parser Box
Disqus CommentsLoadHide