Responsive Flat jQuery Modal adalah jQuery plugin yang akan membantu anda untuk membuat sebuah flat, responsive dan stylish modal window dengan CSS3 transitions and full screen overlay. Tampilan Responsive Flat jQuery Modal sangat bagus untuk desktop ataupun mobile device. Dan yang tidak kalah menariknya adalah jumlah/size filenya cuma 4 kb dalam versi minified.
Bagaimana cara membuatnya :
Pertama masukan CSS berikut di atas </head>
@import url(http://fonts.googleapis.com/css?family=Exo+2:700,400&subset=latin,cyrillic);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;-webkit-overflow-scrolling:touch;text-align:center;opacity:0;background:rgba(33,36,46,0.95);-webkit-transition:opacity .2s linear;-moz-transition:opacity .2s linear;-o-transition:opacity .2s linear;transition:opacity .2s linear}.remodal-overlay:after{display:inline-block;height:100%;margin-left:-.05em;content:''}.remodal-overlay > *{-webkit-transform:translateZ(0px)}.remodal{position:relative;display:inline-block;width:100%;min-height:100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;font-size:16px;background:#f4f4f4;background-clip:padding-box;color:#182a3c;-webkit-box-shadow:0 0 8px #171a24;box-shadow:0 0 8px #171a24;-webkit-transform:scale(0.95);-moz-transform:scale(0.95);-ms-transform:scale(0.95);-o-transform:scale(0.95);transform:scale(0.95);-webkit-transition:0 .2s linear;-moz-transition:0 .2s linear;-o-transition:0 .2s linear;transition:transform .2s linear;padding:35px}.remodal,.remodal *{font-family:'Exo 2', sans-serif}.remodal-bg{-webkit-transition:0 .2s linear;-moz-transition:0 .2s linear;-o-transition:0 .2s linear;transition:filter .2s linear}body.remodal_active .remodal-bg{-webkit-filter:blur(3px);-moz-filter:blur(3px);-o-filter:blur(3px);-ms-filter:blur(3px);filter:blur(3px)}body.remodal_active .remodal-overlay{opacity:1}body.remodal_active .remodal{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);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;-webkit-border-radius:50%;border-radius:50%;border:2px solid #3e5368;-webkit-transition:background .2s linear;-moz-transition:background .2s linear;-o-transition:background .2s linear;transition:background .2s linear}.remodal-close:after{display:block;font-size:28px;font-family:Arial, 'Helvetica CY', 'Nimbus Sans L', sans-serif!important;content:"×";line-height:28px;cursor:pointer;text-decoration:none;color:#3e5368;-webkit-transition:all .2s linear;-moz-transition:all .2s linear;-o-transition:all .2s linear;transition:all .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;font-size:10pt;cursor:pointer;text-decoration:none;text-align:center;-webkit-border-radius:50px;border-radius:50px;background-clip:padding-box;-webkit-transition:all .2s linear;-moz-transition:all .2s linear;-o-transition:all .2s linear;transition:all .2s linear;margin:0 0 5px;padding:9px 0}.remodal-confirm{border:2px solid #16a085;background:#f4f4f4;color:#16a085}.remodal-confirm:hover,.remodal-confirm:active{background:#16a085;color:#f4f4f4}.remodal-cancel{border:2px solid #c0392b;background:#f4f4f4;color:#c0392b}.remodal-cancel:hover,.remodal-cancel:active{background:#c0392b;color:#f4f4f4}@media only screen and min-width 40063em{.remodal{max-width:700px;min-height:0;-webkit-border-radius:6px;border-radius:6px;margin:20px auto}}
Kedua buatlah sebuah anchor text seperti berikut
<a href="#modal">Click</a>
Ketiga buatlah sebuah HTML code seperti berikut ini
<div class="demo" data-remodal-id="modal">
<a href="http://www.jqueryscript.net/tags.php?/Modal/">Modal</a> Content Goes Here
<a class="remodal-cancel" href="#">Cancel</a>
<a class="remodal-confirm" href="#">OK</a>
</div>
Terakhir letakan code berikut ini di atas </body> atau </head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type='text/javascript'>!function(t){"use strict";function i(i,a){this.settings=t.extend({},o,a),this.modal=i,this.buildDOM(),this.addEventListeners(),this.index=t[s].lookup.push(this)-1,this.busy=!1}var s="remodal",o={hashTracking:!0};t[s]={lookup:[]};var a,e,n=function(t){var i=t.css("transition-duration")||t.css("-webkit-transition-duration")||t.css("-moz-transition-duration")||t.css("-o-transition-duration")||t.css("-ms-transition-duration")||0,s=t.css("transition-delay")||t.css("-webkit-transition-delay")||t.css("-moz-transition-delay")||t.css("-o-transition-delay")||t.css("-ms-transition-delay")||0;return 1e3*(parseFloat(i)+parseFloat(s))},d=function(){if(t(document.body).height()<=t(window).height())return 0;var i=document.createElement("div");i.style.visibility="hidden",i.style.width="100px",document.body.appendChild(i);var s=i.offsetWidth;i.style.overflow="scroll";var o=document.createElement("div");o.style.width="100%",i.appendChild(o);var a=o.offsetWidth;return i.parentNode.removeChild(i),s-a},r=function(){t("html, body").addClass(s+"_lock"),t(document.body).css("padding-right","+="+d())},l=function(){t("html, body").removeClass(s+"_lock"),t(document.body).css("padding-right","-="+d())};i.prototype.buildDOM=function(){this.body=t(document.body),this.bg=t("."+s+"-bg"),this.modalClose=t("<a href='#'>").addClass(s+"-close"),this.overlay=t("<div>").addClass(s+"-overlay"),this.modal.hasClass(s)||this.modal.addClass(s),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("."+s+"-confirm"),this.cancel=this.modal.find("."+s+"-cancel");var i=n(this.overlay),o=n(this.modal),a=n(this.bg);this.td=o>i?o:i,this.td=a>this.td?a:this.td},i.prototype.addEventListeners=function(){var i=this;this.modalClose.bind("click."+s,function(t){t.preventDefault(),i.close()}),this.cancel.bind("click."+s,function(t){t.preventDefault(),i.modal.trigger("cancel"),i.close()}),this.confirm.bind("click."+s,function(t){t.preventDefault(),i.modal.trigger("confirm"),i.close()}),t(document).bind("keyup."+s,function(t){27===t.keyCode&&i.close()}),this.overlay.bind("click."+s,function(o){var a=t(o.target);a.hasClass(s+"-overlay")&&i.close()})},i.prototype.open=function(){if(!this.busy){this.busy=!0,this.modal.trigger("open");var i=this.modal.attr("data-"+s+"-id");i&&this.settings.hashTracking&&(e=t(window).scrollTop(),location.hash=i),a&&a!==this&&(a.overlay.hide(),a.body.removeClass(s+"_active")),a=this,r(),this.overlay.show();var o=this;setTimeout(function(){o.body.addClass(s+"_active"),setTimeout(function(){o.busy=!1,o.modal.trigger("opened")},o.td+50)},25)}},i.prototype.close=function(){if(!this.busy){this.busy=!0,this.modal.trigger("close"),this.settings.hashTracking&&this.modal.attr("data-"+s+"-id")===location.hash.substr(1)&&(location.hash="",t(window).scrollTop(e)),this.body.removeClass(s+"_active");var i=this;setTimeout(function(){i.overlay.hide(),l(),i.busy=!1,i.modal.trigger("closed")},i.td+50)}},t&&(t.fn[s]=function(o){var a;return this.each(function(e,n){var d=t(n);d.data(s)||(a=new i(d,o),d.data(s,a.index),a.settings.hashTracking&&d.attr("data-"+s+"-id")===location.hash.substr(1)&&a.open())}),a}),t(document).ready(function(){t(document).on("click","[data-"+s+"-target]",function(i){i.preventDefault();var o=i.currentTarget,a=o.getAttribute("data-"+s+"-target"),e=t("[data-"+s+"-id="+a+"]");t[s].lookup[e.data(s)].open()}),t(document).find("."+s).each(function(i,o){var a=t(o),e=a.data(s+"-options");e||(e={}),a[s](e)})});var c=function(i,o){var e=location.hash.replace("#","");if("undefined"==typeof o&&(o=!0),e){var n=t("[data-"+s+"-id="+e.replace(new RegExp("/","g"),"\\/")+"]");if(n.length){var d=t[s].lookup[n.data(s)];d&&d.settings.hashTracking&&d.open()}}else o&&a&&!a.busy&&a.settings.hashTracking&&a.close()};t(window).bind("hashchange."+s,c)}(window.jQuery||window.Zepto);</script>
DemoDownload
