天天看點

重寫jquery.confirm.js 擺脫傳統alert confirm 插件供下載下傳(一)

傳統的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> 這幾個檔案随便都能找得到。

最後展示一下效果圖:

重寫jquery.confirm.js 擺脫傳統alert confirm 插件供下載下傳(一)
重寫jquery.confirm.js 擺脫傳統alert confirm 插件供下載下傳(一)
重寫jquery.confirm.js 擺脫傳統alert confirm 插件供下載下傳(一)
重寫jquery.confirm.js 擺脫傳統alert confirm 插件供下載下傳(一)

繼續閱讀