弹出框:
//对话框,title是标题文字,content是提示框内容,test是一个function(点击确定按钮触发的事件) function dialogBox(title,content,test){ //生成Html var _html = ""; _html += ‘<div id="db_box"></div><div id="db_con"><span id="db_tit">‘ + title + ‘</span><a id="db_ico">x</a>‘; _html += ‘<div id="db_msg"><div id="db_img"></div><div id="db_word"><p id="db_p1">‘ + content + ‘</p><p id="db_p2">如果是请点击“确定”,否则点“取消”</p></div></div>‘; _html += ‘<div id="db_btnbox"><input id="db_btn_ok" type="button" value="确定" />‘; _html += ‘<input id="db_btn_no" type="button" value="取消" />‘; _html += ‘</div></div>‘; //必须先将_html添加到body,再设置Css样式 $("body").append(_html); //生成Css $("#db_box").css({ width: ‘100%‘, height: ‘100%‘, zIndex: ‘99999‘, position: ‘fixed‘, filter: ‘Alpha(opacity=60)‘, backgroundColor: ‘black‘, top: ‘0‘, left: ‘0‘, opacity: ‘0‘ }); $("#db_con").css({ zIndex: ‘999999‘, width: ‘400px‘, position: ‘fixed‘, backgroundColor: ‘White‘, borderRadius: ‘5px‘, boxShadow: ‘0px 5px 10px #888888‘, }); $("#db_tit").css({ display: ‘block‘, fontSize: ‘14px‘, color: ‘#FFFFFF‘, padding: ‘10px 15px‘, backgroundColor: ‘#0e8bc5‘, borderRadius: ‘5px 5px 0 0‘, fontWeight: ‘bold‘ }); $("#db_msg").css({ height: ‘115px‘, display: ‘flex‘, }); $("#db_ico").css({ display: ‘block‘, position: ‘absolute‘, right: ‘10px‘, top: ‘9px‘, width: ‘20px‘, height: ‘20px‘, textAlign: ‘center‘, lineHeight: ‘16px‘, cursor: ‘pointer‘, borderRadius: ‘12px‘, fontFamily: ‘微软雅黑‘, color: ‘#FFFFFF‘, textDecoration: ‘none‘, fontSize: ‘18px‘, }); $("#db_img").css({ float: ‘left‘, width: ‘80px‘, height: ‘78px‘, margin: ‘25px 20px 25px 38px‘, background: ‘url(../resource/img/right.png) no-repeat‘, }); $("#db_word").css({ float: ‘left‘, display: ‘table-cell‘, verticalAlign: ‘middle‘, height: ‘100px‘, }); $("#db_p1").css({ margin: ‘40px 0 10px 0‘, fontSize: ‘18px‘, }); $("#db_p2").css({ color: ‘#8f8f8f‘, fontSize: ‘13px‘, }); $("#db_btnbox").css({ height: ‘85px‘, textAlign: ‘end‘ }); $("#db_btn_ok,#db_btn_no").css({ width: ‘100px‘, height: ‘30px‘, color: ‘white‘, border: ‘none‘, borderRadius: ‘3px‘, cursor: ‘pointer‘, }); $("#db_btn_ok").css({ backgroundColor: ‘#168bbb‘ }); $("#db_btn_no").css({ backgroundColor: ‘gray‘, marginLeft: ‘5px‘, marginRight: ‘55px‘, }); //右上角关闭按钮hover样式 $("#db_ico").hover(function() { $(this).css({ backgroundColor: ‘Red‘, color: ‘White‘ }); }, function() { $(this).css({ backgroundColor: ‘rgb(14, 139, 197)‘, color: ‘#FFFFFF‘ }); }); var _widht = document.documentElement.clientWidth; //屏幕宽 var _height = document.documentElement.clientHeight; //屏幕高 var boxWidth = $("#db_con").width(); var boxHeight = $("#db_con").height(); //让提示框居中 $("#db_con").css({ top: (_height - boxHeight) / 2 + "px", left: (_widht - boxWidth) / 2 + "px" }); //确定按钮事件 $("#db_btn_ok").click(function() { $("#db_box,#db_con").remove(); if (typeof(test) == ‘function‘) { test(); } }); //取消按钮事件 $("#db_btn_no,#db_ico").click(function() { $("#db_box,#db_con").remove(); }); }
对话框:
//提示框,title是标题文字,content是提示框内容 function promptBox(title,content){ //生成Html var _html = ""; _html += ‘<div id="pb_box"></div><div id="pb_con"><span id="pb_tit">‘ + title + ‘</span>‘; _html += ‘<a id="pb_ico">x</a><div id="pb_msg"><span>‘ + content + ‘</span></div></div>‘; //必须先将_html添加到body,再设置Css样式 $("body").append(_html); //生成Css $("#pb_box").css({ width: ‘100%‘, height: ‘100%‘, zIndex: ‘99999‘, position: ‘fixed‘, filter: ‘Alpha(opacity=60)‘, backgroundColor: ‘black‘, top: ‘0‘, left: ‘0‘, opacity: ‘0‘ }); $("#pb_con").css({ zIndex: ‘999999‘, width: ‘400px‘, position: ‘fixed‘, backgroundColor: ‘White‘, borderRadius: ‘5px‘, boxShadow: ‘0px 5px 10px #888888‘, }); $("#pb_tit").css({ display: ‘block‘, fontSize: ‘14px‘, color: ‘#FFFFFF‘, padding: ‘10px 15px‘, backgroundColor: ‘#0e8bc5‘, borderRadius: ‘5px 5px 0 0‘, fontWeight: ‘bold‘ }); $("#pb_msg").css({ padding: ‘20px‘, fontSize: ‘18px‘, display: ‘flex‘, height: ‘160px‘, }); $("#pb_msg span").css({ margin: ‘auto‘, }); $("#pb_ico").css({ display: ‘block‘, position: ‘absolute‘, right: ‘10px‘, top: ‘9px‘, width: ‘20px‘, height: ‘20px‘, textAlign: ‘center‘, lineHeight: ‘16px‘, cursor: ‘pointer‘, borderRadius: ‘12px‘, fontFamily: ‘微软雅黑‘, color: ‘#FFFFFF‘, textDecoration: ‘none‘, fontSize: ‘18px‘, }); //右上角关闭按钮hover样式 $("#pb_ico").hover(function() { $(this).css({ backgroundColor: ‘Red‘, color: ‘White‘ }); }, function() { $(this).css({ backgroundColor: ‘rgb(14, 139, 197)‘, color: ‘#FFFFFF‘ }); }); var _widht = document.documentElement.clientWidth; //屏幕宽 var _height = document.documentElement.clientHeight; //屏幕高 var boxWidth = $("#pb_con").width(); var boxHeight = $("#pb_con").height(); //让提示框居中 $("#pb_con").css({ top: (_height - boxHeight) / 2 + "px", left: (_widht - boxWidth) / 2 + "px" }); //取消按钮事件 $("#pb_ico").click(function() { $("#pb_box,#pb_con").remove(); }); }
原文:https://www.cnblogs.com/XUYIYUAN/p/10437956.html