Masking Sederhana dengan Loading Animation tanpa CSS Eksternal dengan JavaScript – jQuery

659

Berikut adalah contoh skrip untuk MASK dengan loading animation tanpa memerlukan CSS eksternal dengan JavaScript – jQuery.

Inisialisasi Skrip:

<script type=“text/javascript”>
$(document).ready(function(){
    //mask event listener
    $(“#showMask”).click(function(){
        SimpleMask.show(function(){
        //click on the mask will close modal loading animation and mask
        $(“#simplemask”).unbind(click).bind(click, function(){
            SimpleMask.close();
            });
        });
    });
    
});
</script>
skrip untuk aplikasi (compressed by http://jscompress.com/)
<script type=“text/javascript”>
$(document).ready(function(){
/*
* Simple Mask
*/

var SimpleMask={maskContainer:“#simplemask”,modalContainer:“.simplemodal”,init: function(){if($(this.maskContainer).length==0){this.createNewMask()}},createNewMask:function(){$(‘<div id=”‘+this.maskContainer.replace(“#”,“”)+‘” style=”display:none”></div><div class=”‘+this.modalContainer.replace(“.”,“”)+‘” style=”display:none”></div>’).appendTo(“body”);$(this.maskContainer).css({position :“fixed”,top:0,left:0,height:100%”,width :100%”,“background-color”:“#CCC”});$( this.modalContainer).css({border :1px solid gray”,color:“black”,“background-color” :“#FFF”,width:100px”,position:“absolute”,top :2%”,padding:4px”});var e=“<center><img src=’loading.gif’ /></center>”;$(e).appendTo(this.modalContainer);var t=$(this.modalContainer).outerWidth(true);$(this.modalContainer).css({left:$(window).width()/2-t/2+“px”})},show: function(e){var t=this;var n=$(this.maskContainer).css({display :“block”,opacity:0}); n.fadeTo(500,.6,function(){$(t.modalContainer).fadeIn(300, e)})},close :function(){var e=this;$(e.modalContainer).fadeOut(300,function(){$(e.maskContainer).fadeOut(300)})}};SimpleMask.init()
});
</script>
Untuk melihat DEMO dan Skrip Lengkap silahkan cek disini