利用jquery+bootstrap 制作簡單全局遮罩層

需要引用的JS， 主要是加載的圖標的JS：jquery.spin.merge.js

使用此圖標方法：

element.spinModal(),element是需要加載圖標的Jquery對象。

 

HTML部分，將代碼放在母版頁中。

  <div class="modal" id="myModal" style="display:none">
        </div>

 

JS部分

    /*全局遮罩層*/
        var globalmodal = function (element, action) {
            var mod = $("#myModal");//全局遮罩層
            if (action == true) {
                /*打開遮罩層*/
                element.spinModal();
                mod.attr("style", "display:block");
            }
            else {
                /*關閉遮罩層*/
                element.spinModal(false);
                mod.attr("style", "display:none");
            }
            /*遮罩層樣式及位置*/
            mod.height(element.height() + 10);//遮罩層高度
            mod.width(element.width());//設置遮罩層寬度
            mod.offset(element.offset());//根據遮罩對象來進行定位
        }

在需要使用的地方調用globalmodal(element,action),element表示需要遮罩的對象，action表示關閉獲取打開遮罩層。

效果如下：