傳統的alert和confirm确認框實在不好看,于是去網上找了個BootStrap樣式的, 然後下載下傳了一個jquery.confirm.js,但是拿過來之後發現和現有系統契合度不高, 于是做了相應更改。
首先我們現有系統頁面有iframe,那麼剛下載下傳下來的插件直接應用的效果是提示框 後面的灰色遮罩層隻能蓋住iframe區域,但我們要的效果是蓋住整個螢幕,于是做 了相應更改。
還有就是原先提供的函數樣式是: $('obj').confirm({
text: message,
title: title,
confirm: function (button) {
callback();
},
confirmButton: "确定",
cancelButton: "取消",
confirmButtonClass: "btn-primary",
cancelButtonClass: "btn-default"
});
這樣子應用起來和系統自帶的樣式 alert('提示'); 相差很遠,于是封裝了幾個函數,如: myAlert( message, title ); myConfirm (message, callback, title); myAlertSuccess (message, callback, title);
以上三個函數的 title 參數可以不填,那麼用起來就和系統自帶的 alert、confirm 很相近。
其中函數 myAlertSuccess(message, callback, title); 的應用場景是,比如你需要在點選 “确定”按鈕之後重新整理頁面,那麼我們就可以把重新整理頁面的操作放到回調函數callback裡面, 這樣做的原因是我們這個自定義的modal提示框無法像傳統的alert提示框一樣阻塞後續代碼執行, 這時候我們就采用回調函數的形式使之保持正确的操作流程。
最後,插件的下載下傳位址如下: http://pan.baidu.com/s/1i3vZNaX
要使用這個插件,頁面還需引入: <link href="Content/bootstrap.css" target="_blank" rel="external nofollow" rel="stylesheet" />
<script src="Scripts/jquery-1.10.2.js"></script>
<script src="Scripts/bootstrap.min.js"></script> 這幾個檔案随便都能找得到。
最後展示一下效果圖:
