弹出框:
//对话框,title是标题文字,content是提示框内容,test是一个function(点击确定按钮触发的事件)function dialogBox(title,content,test){//生成Htmlvar _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){//生成Htmlvar _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();});}
