不用寫任何html，只需用一個按鈕直接調用下方方法就行了，一共有兩種模式

appendHtml(“alert”); 這樣是只出來確認按鈕

appendHtml(“confirm”);這樣是確認取消都有的，這樣的確定會調用回調函數，
如果不需要的話可以把 btnOk(callback);改成btnOk();
需要回調的話就不需要動，在callback方法中寫入相應的邏輯就行了

//生成彈出框的方法 function appendHtml(type){var html = "";html += '<div id="mb_box"></div><div id="mb_con"><span id="mb_tit">標題</span>';html += '<a id="mb_ico">x</a><div id="mb_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，再設置Css樣式$("body").append(html);//生成CssGenerateCss();if (type == "alert") {btnOk(); //alert只是彈出消息，因此沒必要用到回調函數callback}if (type == "confirm") {btnOk(callback);}btnNo(); } //生成Css var 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: '900px',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',height: '350px',overflow: 'auto'});$("#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'});//右上角關閉按鈕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() {if (typeof(callback) == 'function') {callback();//回調函數$("#mb_box,#mb_con").remove();}}); } //取消按鈕事件 var btnNo = function() {$("#mb_btn_no,#mb_ico").click(function() {$("#mb_box,#mb_con").remove();}); } //回調函數 function callback(){alert("我是回調函數callback()"); }

效果圖：

總結

以上是生活随笔為你收集整理的JQ 弹出框的全部內容，希望文章能夠幫你解決所遇到的問題。

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