Responsive Jquery Modal Box

Dialox box jika diartikan dalam bahasa indonesia berarti kotak dialog. Teknik ini merupakan salah satu teknik dari JQuery UI yang sering sekali digunakan dalam pembuatan website. Dialox Box dapat digunakan untuk bermacam-macam hal, sesuai kebutuhan yang ada pada website. Misalnya untuk menampilkan iklan ketika tombol diklik, menampilkan pesan atau informasi penting pada website ketika tombol dklik, bahkan dapat digunakan untuk pengisian formulir pendaftaran atau komentar ketika tombol dklik. Selain tampilannya menarik, teknik ini juga dapat bermanfaat untuk menghemat ruang pada website.

Demo

Langkah pertama

• Login Ke Blogger.com pakai akun sobat.
• Edit template. (Backup dulu apabila terjadi kesalahan)
• Cari tag ]]></b:skin> atau </style> gunakan CTRL + F untuk mempermudah pencarian kemudian sisipkan CSS berikut ini..

html.remodal_lock, body.remodal_lock {
overflow : hidden;
}
.remodal, [data-remodal-id] {
visibility : hidden;
}
.remodal-overlay {
position : fixed;
top : 0;
left : 0;
right : 0;
bottom : 0;
z-index : 10000;
display : none;
overflow : auto;
text-align : center;
}
.remodal-overlay:after {
display : inline-block;
height : 100%;
margin-left : -0.05em;
content : '';
}
.remodal {
position : relative;
display : inline-block;
}
.remodal-bg {
transition : filter 0.2s linear;
}
.remodal-overlay {
opacity : 0;
background : rgba(33, 36, 46, 0.95);
transition : opacity 0.2s linear;
}
body.remodal_active .remodal-overlay {
opacity : 1;
}
.remodal {
width : 100%;
min-height : 100%;
padding : 35px;
box-sizing : border-box;
font-size : 16px;
background : #f4f4f4;
background-clip : padding-box;
color : #182a3c;
box-shadow : 0 0 8px #171a24;
transform : scale(0.95);
transition : transform 0.2s linear;
}
body.remodal_active .remodal {
transform : scale(1);
}
.remodal, .remodal-overlay:after {
vertical-align : middle;
}
.remodal-close {
position : absolute;
top : 5px;
left : 5px;
width : 28px;
height : 28px;
text-decoration : none;
border-radius : 50%;
border : #3e5368 solid 2px;
transition : background 0.2s linear;
}
.remodal-close:after {
display : block;
font-size : 28px;
font-family : Arial, 'Helvetica CY', 'Nimbus Sans L', sans-serif !important ;
content : "X";
line-height : 28px;
cursor : pointer;
text-decoration : none;
color : #3e5368;
transition : all 0.2s linear;
}
.remodal-close:hover, .remodal-close:active {
background : #3e5368;
}
.remodal-close:hover.remodal-close:after, .remodal-close:active.remodal-close:after {
color : #f4f4f4;
}
.remodal-confirm, .remodal-cancel {
display : inline-block;
width : 120px;
padding : 9px 0;
margin : 0 0 5px 0;
font-size : 10pt;
cursor : pointer;
text-decoration : none;
text-align : center;
border-radius : 50px;
background-clip : padding-box;
transition : all 0.2s linear;
}
.remodal-confirm {
border : #16a085 solid 2px;
background : #f4f4f4;
color : #16a085;
}
.remodal-confirm:hover, .remodal-confirm:active {
background : #16a085;
color : #f4f4f4;
}
.remodal-cancel {
border : #c0392b solid 2px;
background : #f4f4f4;
color : #c0392b;
}
.remodal-cancel:hover, .remodal-cancel:active {
background : #c0392b;
color : #f4f4f4;
}
@media only screen and (min-width:40.063em) {
.remodal {
max-width : 700px;
margin : 20px auto;
min-height : 0;
border-radius : 6px;
}
}
.show_button {
font-family : 'Lobster', cursive;
font-size : 48px;
display : inline-block;
width : 150px;
height : 150px;
text-align : center;
text-decoration : none;
line-height : 142px;
color : #ecf0f1;
border-radius : 50%;
background : #c0392b;
transition : background 0.3s ease-out;
}
.show_button:hover, .show_button:active {
background : #e74c3c;
}

Langkah Kedua

• Cari tag </body> gunakan CTRL + F untuk mempermudah pencarian kemudian tambahkan Javascript berikut ini..

<script type='text/javascript'>
! function(a) {
    "use strict";

    function b(b, e) {
        this.settings = a.extend({}, d, e), this.modal = b, this.buildDOM(), this.addEventListeners(), this.index = a[c].lookup.push(this) - 1, this.busy = !1
    }
    var c = "remodal",
        d = {
            hashTracking: !0,
            closeOnConfirm: !0,
            closeOnCancel: !0
        };
    a[c] = {
        lookup: []
    };
    var e, f, g = function(a) {
            var b = a.css("transition-duration") || a.css("-webkit-transition-duration") || a.css("-moz-transition-duration") || a.css("-o-transition-duration") || a.css("-ms-transition-duration") || 0,
                c = a.css("transition-delay") || a.css("-webkit-transition-delay") || a.css("-moz-transition-delay") || a.css("-o-transition-delay") || a.css("-ms-transition-delay") || 0;
            return 1e3 * (parseFloat(b) + parseFloat(c))
        },
        h = function() {
            if (a(document.body).height() <= a(window).height()) return 0;
            var b = document.createElement("div");
            b.style.visibility = "hidden", b.style.width = "100px", document.body.appendChild(b);
            var c = b.offsetWidth;
            b.style.overflow = "scroll";
            var d = document.createElement("div");
            d.style.width = "100%", b.appendChild(d);
            var e = d.offsetWidth;
            return b.parentNode.removeChild(b), c - e
        },
        i = function() {
            a(document.body).css("padding-right", "+=" + h()), a("html, body").addClass(c + "_lock")
        },
        j = function() {
            a(document.body).css("padding-right", "-=" + h()), a("html, body").removeClass(c + "_lock")
        },
        k = function(a) {
            var b, c, d = {};
            b = a.replace(/\s*:\s*/g, ":").replace(/\s*,\s*/g, ","), c = b.split(",");
            var e, f, g;
            for (e = 0, f = c.length; f > e; e++) c[e] = c[e].split(":"), g = c[e][1], ("string" == typeof g || g instanceof String) && (g = "true" === g || ("false" === g ? !1 : g)), ("string" == typeof g || g instanceof String) && (g = isNaN(g) ? g : +g), d[c[e][0]] = g;
            return d
        };
    b.prototype.buildDOM = function() {
        this.body = a(document.body), this.bg = a("." + c + "-bg"), this.modalClose = a("<a href='#'>").addClass(c + "-close"), this.overlay = a("<div>").addClass(c + "-overlay"), this.modal.hasClass(c) || this.modal.addClass(c), this.modal.css("visibility", "visible"), this.modal.append(this.modalClose), this.overlay.append(this.modal), this.body.append(this.overlay), this.confirm = this.modal.find("." + c + "-confirm"), this.cancel = this.modal.find("." + c + "-cancel");
        var b = g(this.overlay),
            d = g(this.modal),
            e = g(this.bg);
        this.td = d > b ? d : b, this.td = e > this.td ? e : this.td
    }, b.prototype.addEventListeners = function() {
        var b = this;
        this.modalClose.bind("click." + c, function(a) {
            a.preventDefault(), b.close()
        }), this.cancel.bind("click." + c, function(a) {
            a.preventDefault(), b.modal.trigger("cancel"), b.settings.closeOnCancel && b.close()
        }), this.confirm.bind("click." + c, function(a) {
            a.preventDefault(), b.modal.trigger("confirm"), b.settings.closeOnConfirm && b.close()
        }), a(document).bind("keyup." + c, function(a) {
            27 === a.keyCode && b.close()
        }), this.overlay.bind("click." + c, function(d) {
            var e = a(d.target);
            e.hasClass(c + "-overlay") && b.close()
        })
    }, b.prototype.open = function() {
        if (!this.busy) {
            this.busy = !0, this.modal.trigger("open");
            var b = this.modal.attr("data-" + c + "-id");
            b && this.settings.hashTracking && (f = a(window).scrollTop(), location.hash = b), e && e !== this && (e.overlay.hide(), e.body.removeClass(c + "_active")), e = this, i(), this.overlay.show();
            var d = this;
            setTimeout(function() {
                d.body.addClass(c + "_active"), setTimeout(function() {
                    d.busy = !1, d.modal.trigger("opened")
                }, d.td + 50)
            }, 25)
        }
    }, b.prototype.close = function() {
        if (!this.busy) {
            this.busy = !0, this.modal.trigger("close"), this.settings.hashTracking && this.modal.attr("data-" + c + "-id") === location.hash.substr(1) && (location.hash = "", a(window).scrollTop(f)), this.body.removeClass(c + "_active");
            var b = this;
            setTimeout(function() {
                b.overlay.hide(), j(), b.busy = !1, b.modal.trigger("closed")
            }, b.td + 50)
        }
    }, a && (a.fn[c] = function(d) {
        var e;
        return this.each(function(f, g) {
            var h = a(g);
            null == h.data(c) && (e = new b(h, d), h.data(c, e.index), e.settings.hashTracking && h.attr("data-" + c + "-id") === location.hash.substr(1) && e.open())
        }), e
    }), a(document).ready(function() {
        a(document).on("click", "[data-" + c + "-target]", function(b) {
            b.preventDefault();
            var d = b.currentTarget,
                e = d.getAttribute("data-" + c + "-target"),
                f = a("[data-" + c + "-id=" + e + "]");
            a[c].lookup[f.data(c)].open()
        }), a(document).find("." + c).each(function(b, d) {
            var e = a(d),
                f = e.data(c + "-options");
            f ? ("string" == typeof f || f instanceof String) && (f = k(f)) : f = {}, e[c](f)
        })
    });
    var l = function(b, d) {
        var f = location.hash.replace("#", "");
        if ("undefined" == typeof d && (d = !0), f) {
            var g;
            try {
                g = a("[data-" + c + "-id=" + f.replace(new RegExp("/", "g"), "\\/") + "]")
            } catch (b) {}
            if (g && g.length) {
                var h = a[c].lookup[g.data(c)];
                h && h.settings.hashTracking && h.open()
            }
        } else d && e && !e.busy && e.settings.hashTracking && e.close()
    };
    a(window).bind("hashchange." + c, l)
}(window.jQuery || window.Zepto);
</script>

• Save template, jika terjadi error silahkan konversikan dulu Javascript di atas melalui Formulir Konversi Kode di atas Form Komentar Blog ini

Langkah Terkahir

Setelah berhasil "Save template" silahkan sobat pergi ke Tata letak blogger sobat, Add Gadget - Javascript/HTML kemudian tambahkan tag HTML di bawah ini..

<a class="show_button" href="#show">Show</a>

<div class="remodal" data-remodal-id="show">
   <h3>Demo Modal</h3>
   <p>
       Flat, responsive, lightweight, fast, easy customizable modal window jquery plugin
       with declarative state notation and hash tracking.
   </p>
   <a class="remodal-confirm" href="#">OK</a>
</div>

Semoga bermanfaat..

Share on Facebook

Share on Twitter

Share on Google+