不廢話直接上程式碼
是jqeruy外掛，所以需要先引用jquery。
showMdal.js

;(function($) {

    $.extend({

        //新增背景
        modal_bg : function() {
            var modalHtml = '<div class="modal-wrap">\n'
                    + ' <div class="modal-loadimg">\n'
                    + '     <img src="images/gears.gif" alt="">\n'
 

                    + '     <p class="load-text">正在讀取資料...</p>\n'
                    + ' </div>\n' + '   <div class="modal-bg"></div>\n'
                    + '</div>';
            $('body').addClass('noscroll').append(modalHtml);
        },

        //移除modal
        modal_remove : function
 
() {
            $('.modal-wrap:last').remove();
            $('body').removeClass('noscroll');
        },

        //關閉當前層,傳$this,即可
        modal_close : function(obj) {
            if ($('body').hasClass('noscroll')) {
                if ($('.modal-dialog').length > 1) {
                    obj.closest('.modal-dialog'
 
).remove();
                } else {
                    $.modal_remove();
                }
            }
        },

/************************************************************
 *
 * setting是一個物件，下面是屬性介紹，預設按預設值計算
 * setting: {
 *     title:          彈層標題，string
 *     content:        彈窗內容，string
 *     dialogClass:    dialog的ClassName， string
 *     width:          dialog的行內style寬度設定，必須帶單位(px,em,rem) ，string ，
 *     height:         dialog的行內style高度設定，必須帶單位(px,em,rem) ，string ，
 *     style:          dialog 行內樣式設定，如果與width,height衝突，以style為準,string
 *     button: [
 *         {
 *              name:       按鈕名稱(確認，取消等)，string
 *              btnClass：  按鈕樣式名稱，string
 *              click：     按鈕點選事件的回撥, function
 *         }
 *     ]
 * }
 * 
 *************************************************************/


        showModal : function(setting) {
            if ($('body').hasClass('noscroll')) {
                $('.modal-content').hide();
                if ($('.tipsbox-confirm').length != 0) {
                    $('.tipsbox-confirm').remove();
                }
            } else {
                $.modal_bg();
            }

            var _title = setting.title || '提示',
                _content = setting.content || "",
                _class = setting.dialogClass || "",
                _width = setting.width,
                _height = setting.height,
                _style = setting.style || ";",
                _button = setting.button||[];

            var btnsHtml = "";
            for (var i = 0, length = _button.length; i < length; i++) {
                btnsHtml = btnsHtml
                         + '<a href="javascript:void(0)" class="btn dialog-default '+ _button[i].btnClass  + '">' + _button[i].name + '</a>';
            }

            var dialogHtml = '<div class="modal-dialog dialog-tipsbox '+ _class + '" style="' + 'width:' + _width + ';height:' + _height + ';'+_style + '">'
                           + '  <h4 class="modal-title">'
                           + '      <i class="fa fa-info-circle"></i>'
                           + '      <span class="dialog-title">' + _title + '</span>'
                           + '      <span class="modal-close">&#215;</span>'
                           + '  </h4>' 
                           + '  <div class="modal-inner">'
                           + '      <div class="dialog-text">' + _content + '</div>' 
                           + '      <div class="dialog-btn-group">'+ btnsHtml +'</div>\n' 
                           + '  </div>\n' 
                           + '</div>';

            dialogHtml = $(dialogHtml);

            $('.modal-bg:last').before(dialogHtml);

            // 判斷內容層寬度設定居中
            if ((_width != undefined && _width != "") || _style.indexOf("width") != -1) {
                _width = dialogHtml.css("width");
                var m_left;
                switch (_width.replace(/[0-9]/g, "")) {
                    case "px":
                        m_left = -Number(_width.slice(0, -2)) / 2 + "px";
                        dialogHtml.css("margin-left", m_left);
                        break;
                    case "em":
                        m_left = -Number(_width.slice(0, -2)) / 2 + "em";
                        dialogHtml.css("margin-left", m_left);
                        break;
                    case "rem":
                        m_left = -Number(_width.slice(0, -3)) / 2 + "rem";
                        dialogHtml.css("margin-left", m_left);
                        break;
                }

            }

            //判斷內容層高度設定居中   
            if ((_height != undefined && _height != "") || _style.indexOf("height") != -1) {
                _height = dialogHtml.css("height");
                var m_top;
                switch (_height.replace(/[0-9]/g, "")) {
                case "px":
                    m_top = -Number(_height.slice(0, -2)) / 2 + "px";
                    dialogHtml.css("margin-top", m_top);
                    break;
                case "em":
                    m_top = -Number(_height.slice(0, -2)) / 2 + "em";
                    dialogHtml.css("margin-top", m_top);
                    break;
                case "rem":
                    m_top = -Number(_height.slice(0, -3)) / 2 + "rem";
                    dialogHtml.css("margin-top", m_top);
                    break;
                }

            }

            //找到btn陣列，即a標籤陣列，新增事件
            var aArray = $(" .dialog-text:contains(" + _content + ")") .siblings(".dialog-btn-group").children();
            for (var i = 0, length = aArray.length; i < length; i++) {
                $(aArray[i]).click(_button[i].click);
                var fn = "" + _button[i].click;
                if (fn.indexOf("showModal") == -1) {
                    $(aArray[i]).click(function() {
                        $.modal_close($(this));
                    });
                }
            }


            //使title可以拖動。
            var title = dialogHtml.find('.modal-title');
            var move = false; //移動標記 
            var _x,
                _y,//滑鼠離控制元件左上角的相對位置 
                x,
                y;//對話方塊實時的位置
            title.mousedown(function(e) {
                move = true;
                _x = e.pageX - parseInt(dialogHtml.css("left"));
                _y = e.pageY - parseInt(dialogHtml.css("top"));
            });
            $(document).mousemove(function(e) {
                if (move) {
                    x = e.pageX - _x; //控制元件左上角到螢幕左上角的相對位置 
                    y = e.pageY - _y;
                    dialogHtml.css({
                        "top": y,
                        "left": x
                    });
                }
            }).mouseup(function() {
                move = false;
            });
            dialogHtml.find('.dialog-ok').focus();

            dialogHtml.find('.modal-close').click(function() {
                $.modal_close($(this)); // 傳this到function
            });
        }

    })

})(jQuery)

modal.css

/*  --------------------------------------------------
    DIY Modals
    -------------------------------------------------- */

    /* modal寮瑰眰 */

    .noscroll{ overflow:hidden;}

    .modal-wrap {
        position: fixed; 
        top: 0;
        left: 0;
        /*display: none;*/
        width: 100%;
        height: 100%;
        z-index: 100;
    }

    .modal-loadimg {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 160px;
        height: auto;
        margin: -80px 0 0 -90px;
        padding: 15px 10px 10px;
        color: #555;
        text-align: center;
        background: #fff;
        /*border: 4px solid #777;*/
        border-radius: 10px;
        z-index: 102;
    }

    .modal-loadimg .load-text {
        padding-top: 10px;
    }

    .modal-title {
        position: relative;
        display: block;
        height: 40px;
        padding-left: 12px;
        line-height: 40px;
        font-size: 18px;
        font-weight: normal;
        color: #855d10;
        background: #ffc657;
        border-bottom: 1px solid #e8b10d;
    }

    .modal-content {
        position: absolute;
        top: 50%;
        left: 50%;
        /*display: none;*/
        width: 558px;
        height: 498px;
        margin: -250px auto auto -280px;
        background: #fff;
        border: 1px solid #e8b10d;
        -webkit-box-shadow:0 0 10px #222;  
        -moz-box-shadow:0 0 10px #222;  
        box-shadow:0 0 10px #222;  
        z-index: 103;
    }

    .modal-inner {
        padding: 10px;
    }

    .modal-bg {
        position: fixed; 
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /*background: #000;*/
        background: rgba(0,0,0,.8);
        z-index: 101;       
    }

    .modal-bg-mini {
        position: absolute; 
        top: -1px;
        left: -1px;
        display: none;
        width: 560px;
        height: 500px;
        /*background: #000;*/
        background: rgba(0,0,0,.8);
        z-index: 101;       
    }

    .modal-close-hide,
    .modal-close-requery,
    .modal-close {
        position: absolute;
        right: 10px;
        top: 0;
        font-size: 30px;
        cursor: pointer;
    }

    /* modal-dialog */
    .modal-dialog {
        position: absolute;
        top: 50%;
        left: 50%;
        background: #fff;
        border: 1px solid #e8b10d;
        -webkit-box-shadow:0 0 10px #222;  
        -moz-box-shadow:0 0 10px #222;  
        box-shadow:0 0 10px #222;  
        z-index: 125;
    }

    .modal-dialog,dialog-tipsbox {
        width: 300px;
        margin: -80px 0 0 -151px;       
    }

    .modal-dialog.dialog-confirm {
        width: 558px;
        margin: -80px 0 0 -280px;
    }

    .dialog-btn-group,
    .dialog-text {
        padding: 10px;
        line-height: 1.4;
    }

    .dialog-btn-group {
        text-align: right;
    }

    .dialog-confirm .dialog-btn-group {
        text-align: center;
    }

    .dialog-ok {
        /*margin-top: 10px;*/
        padding: 6px 16px;
        font-size: 16px;
        color: #fff;
        border-radius: 1px;
        background: #ff931e;
    }

    .dialog-ok:hover {
        color: #fff;
        background: #ffae00;
    }

    .dialog-btn2,
    .dialog-cancel {
        /*margin-top: 10px;*/
        padding: 6px 16px;
        font-size: 16px;
        color: #fff;
        border-radius: 1px;
        background: #abbbc3;
    }

    .dialog-btn2:hover,
    .dialog-cancel:hover {
        color: #fff;
        background: #b7c9d2;
    }

    /* 瀹氭椂3縐掓枃瀛楁牱寮�*/
    .return-text {
        font-size: 18px;
        text-align: center;
    }

    .return-text .fa {
        margin-bottom: 10px;
        font-size: 48px;
        color: #ffae00;
    }

    .countdown-time {
        font-weight: 600px;
        color: red;
    }