Bootstrap 遮罩插件jquery.mloading

使用方法

將jquery.mloading.js和jquery.mloading.css引入到頁面，調用：

$(element).mLoading({
    text:"",//加載文字，默認值：加載中...
    icon:"",//加載圖標，默認值：一個小型的base64的gif圖片
    html:false,//設置加載內容是否是html格式，默認值是false
    content:"",//忽略icon和text的值，直接在加載框中顯示此值
    mask:true//是否顯示遮罩效果，默認顯示
});

方法：

$(element).mLoading("show");//顯示loading組件
$(element).mLoading("hide");//隱藏loading組件

 

比如點擊按鈕，出現加載中：

js代碼
<link rel="stylesheet" href="~/Content/bootstrap.css" />
<link rel="stylesheet" href="~/Content/bootstrap-loading.css"/>

<script type="text/javascript" src="~/Scripts/jquery-1.11.3.js"></script>
<script  type="text/javascript" src="src/jquery.mloading.js"></script>
<script>
    $(function(){
        $("#loadingBtnTest").click(function(){
            $("body").mLoading();
        });
    });
</script>

效果：背景會有白色蒙層，彈出“正在加載”的遮罩。