js+jquery手写弹出提示框
生活随笔
收集整理的這篇文章主要介紹了
js+jquery手写弹出提示框
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery彈出框-jq22.com</title>
<script src="jquery-1.11.3.js"></script>
<style>
</style>
</head>
<body>
<input id="add" type="button" value="添加">
<!-- <input id="delete" type="button" value="刪除" /> -->
<input id="update" type="button" value="修改"><script>
$("#add").bind("click", function() {$.MsgBox.Alert("消息", "哈哈，添加成功！");
});//回調(diào)函數(shù)可以直接寫(xiě)方法function(){}
/*$("#delete").bind("click", function () {$.MsgBox.Confirm("溫馨提示", "執(zhí)行刪除后將無(wú)法恢復(fù)，確定繼續(xù)嗎？溫馨提示", function () { alert("你居然真的刪除了..."); });
});*/
function test() {alert("你點(diǎn)擊了確定,重新進(jìn)行認(rèn)證");
}
//也可以傳方法名 test
$("#update").bind("click", function() {$.MsgBox.Confirm("溫馨提示", "確定要進(jìn)行修改嗎？", test);
});
//當(dāng)然你也可以不給回調(diào)函數(shù),點(diǎn)擊確定后什么也不做，只是關(guān)閉彈出層//$("#update").bind("click", function () { $.MsgBox.Confirm("溫馨提示", "確定要進(jìn)行修改嗎？"); });
(function() {$.MsgBox = {Alert: function(title, msg) {GenerateHtml("alert", title, msg);btnOk(); //alert只是彈出消息，因此沒(méi)必要用到回調(diào)函數(shù)callback
btnNo();},Confirm: function(title, msg, callback) {GenerateHtml("confirm", title, msg);btnOk(callback);btnNo();}}//生成Htmlvar GenerateHtml = function(type, title, msg) {var _html = "";_html += '<div id="mb_box"></div><div id="mb_con"><span id="mb_tit">' + title + '</span>';_html += '<a id="mb_ico">x</a><div id="mb_msg">' + msg + '</div><div id="mb_btnbox">';if (type == "alert") {_html += '<input id="mb_btn_ok" type="button" value="確定" />';}if (type == "confirm") {_html += '<input id="mb_btn_ok" type="button" value="確定" />';_html += '<input id="mb_btn_no" type="button" value="取消" />';}_html += '</div></div>';//必須先將_html添加到body，再設(shè)置Css樣式
$("body").append(_html);//生成Css
GenerateCss();}//生成Cssvar GenerateCss = function() {$("#mb_box").css({width: '100%',height: '100%',zIndex: '99999',position: 'fixed',filter: 'Alpha(opacity=60)',backgroundColor: 'black',top: '0',left: '0',opacity: '0.6'});$("#mb_con").css({zIndex: '999999',width: '400px',position: 'fixed',backgroundColor: 'White',borderRadius: '15px'});$("#mb_tit").css({display: 'block',fontSize: '14px',color: '#444',padding: '10px 15px',backgroundColor: '#DDD',borderRadius: '15px 15px 0 0',borderBottom: '3px solid #009BFE',fontWeight: 'bold'});$("#mb_msg").css({padding: '20px',lineHeight: '20px',borderBottom: '1px dashed #DDD',fontSize: '13px'});$("#mb_ico").css({display: 'block',position: 'absolute',right: '10px',top: '9px',border: '1px solid Gray',width: '18px',height: '18px',textAlign: 'center',lineHeight: '16px',cursor: 'pointer',borderRadius: '12px',fontFamily: '微軟雅黑'});$("#mb_btnbox").css({margin: '15px 0 10px 0',textAlign: 'center'});$("#mb_btn_ok,#mb_btn_no").css({width: '85px',height: '30px',color: 'white',border: 'none'});$("#mb_btn_ok").css({backgroundColor: '#168bbb'});$("#mb_btn_no").css({backgroundColor: 'gray',marginLeft: '20px'});//右上角關(guān)閉按鈕hover樣式
$("#mb_ico").hover(function() {$(this).css({backgroundColor: 'Red',color: 'White'});}, function() {$(this).css({backgroundColor: '#DDD',color: 'black'});});var _widht = document.documentElement.clientWidth; //屏幕寬var _height = document.documentElement.clientHeight; //屏幕高var boxWidth = $("#mb_con").width();var boxHeight = $("#mb_con").height();//讓提示框居中
$("#mb_con").css({top: (_height - boxHeight) / 2 + "px",left: (_widht - boxWidth) / 2 + "px"});}//確定按鈕事件var btnOk = function(callback) {$("#mb_btn_ok").click(function() {$("#mb_box,#mb_con").remove();if (typeof(callback) == 'function') {callback();}});}//取消按鈕事件var btnNo = function() {$("#mb_btn_no,#mb_ico").click(function() {$("#mb_box,#mb_con").remove();});}
})();
</script></body>
</html>
?
轉(zhuǎn)載于:https://www.cnblogs.com/weiyf/p/8554729.html
總結(jié)
以上是生活随笔為你收集整理的js+jquery手写弹出提示框的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： ubuntu下修改网卡名称
- 下一篇： Shell告警系统（需求分析，告警系统主