Jquery實現自定義訊息彈窗

當覺得瀏覽器的alert彈框太難看時，就會想動手自行編輯彈框啦，首先在html頁面0的插入彈框div。

寫在body結束標籤前就行了。

<div id="cjy-maskBox"></div>

 

接下來就是通過觸發條件（比如操作錯誤）觸發彈框事件

 var cjy_alert = function (str) {
        var html = '<div class="cjy-mask" id="cjy-mask"></div>' +
                   '<div class="cjy-alert" id="cjy-alert">' +
                       '<div class="cjy-alertHed">提示：</div>' +
                       '<p class="cjy-alertCon text-center">' + str + '</p>' +
                       '<div class="text-center cjy-alertBtndiv"><button class="btn cjy-alertBtn" id="cjy-alertBtn">確定</button></div>' +
                   '</div>';
        $('#cjy-maskBox').html(html);
        $('#cjy-alertBtn').on('click', function () {
            $('#cjy-maskBox').html('');
            clearInterval(timer);
        })
        var timer = setInterval(function () {
            $('#cjy-maskBox').html('');
            clearInterval(timer);
        }, 3000);
    }

 

str是你需要在彈框中提示的資訊。
使用者可以點選確定按鈕關閉彈框，或者無操作3秒後彈框自動關閉。
呼叫函式

if(true){
 cjy_alert('您的輸入有誤');
}

 

彈框css：

/*提示框*/
.cjy-mask{
    position:fixed;
    left:0;
    top:0;
    right:0;
    bottom:0;
    background:#000;
    opacity:0.5;
    z-index:888;
}

.cjy-alert,
.cjy-BulkImport-alert{
    position: fixed;
    left: 40%;
    top: 40%;
    width: 330px;
    height: 9rem;
    background: #fff;
    z-index: 999;
    padding: 1rem 1rem;
}

.cjy-alertCon{
    margin-top:1.2rem;
}

.cjy-alertBtndiv{
    margin-top:1.2rem;
}

.cjy-alertBtn{
    width:100px;
    height:2rem;
    background:#548ee5;
    color:#fff;
}

 

ps:text-center和btn為bootstrap中的樣式。