1.彈出消息,帶關閉按鈕[點擊演示]

2.彈出成功信息,1秒后自動關閉[點擊演示][點擊演示]

3.彈出失敗信息,1秒后自動關閉[點擊演示][點擊演示]

4.綜合應用 xcsoft.alert('內容','error|success|show',秒數)

操作說明:

1.需要載入jquery,如果頁面上不載入jquery,則使用xcsoft.jquery(),即可自動載入 [函數使用說明]

xcsoft.jquery();//自動加載jquery

xcsoft.jquery(function(e){

//此處和jquery中的$(function(){})一致,即加載完后執行

xcsoft.initialize();//添加此代碼可實現按ESC鍵關閉彈出窗口

});

2.關于彈出窗口的小圖標可以css樣式中設置

#xcsoftAlert .error{background:url(http://www.xcsoft.cn/public/images/info.png) 0 -32px; }

#xcsoftAlert .show{background:url(http://www.xcsoft.cn/public/images/info.png) 0 -64px; }

#xcsoftAlert .success{background:url(http://www.xcsoft.cn/public/images/info.png);}

3.以下參數為默認值,可自行修改xcsoft.second=1000;//默認1秒后退出

xcsoft.gradual=200;//0.2秒的淡入淡出

xcsoft.rebound=50;//彈窗默認向上移動50像素

xcsoft.clickHide=false;//自動退出狀態時,是否啟動點擊立即退出

//以下參數為本插件默認全部參數,可全修改,或者單個修改

//如:xcsoft.alertparam.show.background="#f00";

//如:xcsoft.alertparam.error={borderColor:"#ff0",borderWidth:'10px'}

xcsoft.alertparam={

borderColor:"rgba(0,144,228,0.8)",

borderWidth:"5px",

background:"#fff",

showColor:"#0090e4",

errorColor:"#f00",

successColor:"#390",

show:{

borderColor:"#0090e4",

borderWidth:"5px",

background:"#fff",

color:'#0090e4'

},

error:{

borderColor:"#f00",

borderWidth:"5px",

background:"#fff",

color:'#f00'

},

success:{

borderColor:"#390",

borderWidth:"5px",

background:"#fff",

color:'#390'

},

}

4.后續版本...

標簽

按鍵盤左右方向鍵可快速瀏覽上一篇(←)、下一篇(→)

總結

以上是生活随笔為你收集整理的css设置弹出信息,javaScript自定义alert弹出信息窗口的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。