类似网易发邮件的div的实现(一)_前端实现网易发件人效果-优快云博客

本文链接：https://blog.youkuaiyun.com/dotnet90/article/details/2609961

本文介绍了一种使用JavaScript实现模态对话框的方法，包括对话框的显示与隐藏、背景渐变效果及按钮交互等细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//检查页面中是否存在该控件. function checkIMBObject(){ if (document.getElementById("imb_Background")==null){ document.body.innerHTML += "<iframe id=/"imb_Background/" src=/"about:blank/" style=/"position:absolute;left:0;top:0;width:0px;height:0px;visibility:hidden;/" frameborder=/"0/"></iframe>"; window.imb_Background.document.open(); window.imb_Background.document.write("<html><Head><meta http-equiv=/"Content-Type/" content=/"text/html; charset=gb2312/" /></Head><body bgcolor=red> </body></html>"); window.imb_Background.document.close(); } if (document.getElementById("imb_FormModal")==null){ document.body.innerHTML += "<iframe id=/"imb_FormModal/" src=/"about:blank/" style=/"position:absolute;left:0;top:0;width:0px;height:0px;visibility:hidden;border-bottom:2px solid #999999;border-right:2px solid #999999;border-top:1px solid #F8F6C1;border-left:1px solid #F8F6C1;/" frameborder=/"0/"></iframe>"; window.imb_FormModal.document.open(); window.imb_FormModal.document.write("<html><head><meta http-equiv=/"Content-Type/" content=/"text/html; charset=gb2312/" /><style></style>"); window.imb_FormModal.document.write("<script language=javascript>"); window.imb_FormModal.document.write("function SetModalResult(value)"); window.imb_FormModal.document.write("{"); //window.imb_FormModal.document.write(" parent.document.body.disabled = false;"); window.imb_FormModal.document.write(" parent.document.getElementById(/"imb_Background/").style.visibility = /"hidden/";"); window.imb_FormModal.document.write(" parent.document.getElementById(/"imb_FormModal/").style.visibility = /"hidden/";"); window.imb_FormModal.document.write(" parent.CheckDialogModalResult(value);"); window.imb_FormModal.document.write("}"); window.imb_FormModal.document.write("</script>"); window.imb_FormModal.document.write("</head><body scroll=no leftmargin=0 topmargin=0>"); window.imb_FormModal.document.write("<table width=100% height=100% bgcolor=/"#eeeeee/"><tr><td align=left bgcolor=#3A80F3 height=30><div id=/"imb_Title/" style=/"padding-left:3px;padding-right:3px;color:white;font:宋体;/">"); window.imb_FormModal.document.write("</div></td></tr><tr><td align=left><div id=/"imb_Content/" style=/"padding:7px;/">"); window.imb_FormModal.document.write("</div></td></tr><tr><td id=/"imb_Body/" align=center>"); window.imb_FormModal.document.write("</td></tr>"); window.imb_FormModal.document.write("<tr><td><div id=/"imb_ModalResult/" style=/"display:none/"></div>"); window.imb_FormModal.document.write("</td></tr></table>"); window.imb_FormModal.document.write("</body></html>"); window.imb_FormModal.document.close(); } }

// 对话框对象 function innerMessageBox(){ var BackObject, FormObject; //显示对话框控件. this.ShowModal = function(iCaption, iMessage, iWidth, iHeight){ // 初始化变量 var smWidth = 420, smHeight = 180, smCaption = "默认对话框", smMessage="您确定执行这项操作吗?", smObject, smInterval; // 赋参数值 if (arguments.length > 3 ){ smWidth = iWidth; smHeight = iHeight; smCaption = iCaption; smMessage = iMessage; } // 背景的渐显. function checkIMBAlpha(){ smObject.style.filter = "alpha(opacity="+smAlpha+");"; smAlpha += 10; if (smAlpha>80){ clearInterval(smInterval); } } this.BackObject = document.getElementById("imb_Background"); this.FormObject = document.getElementById("imb_FormModal"); smObject = this.BackObject; smAlpha = 0; this.BackObject.style.left = 0; this.BackObject.style.top = 0; this.BackObject.style.width = document.body.scrollWidth; this.BackObject.style.height = document.body.scrollHeight; this.BackObject.style.visibility = "visible"; smInterval = window.setInterval(checkIMBAlpha, 5);

this.FormObject.style.left = document.body.clientWidth/2 - smWidth/2; this.FormObject.style.top = document.body.clientHeight/2 - smHeight/2; this.FormObject.style.width = smWidth; this.FormObject.style.height = smHeight; this.FormObject.style.visibility = "visible"; window.imb_FormModal.document.getElementById("imb_Title").innerHTML = "<B>  " + smCaption +"</B>"; window.imb_FormModal.document.getElementById("imb_Content").innerHTML = "  " + smMessage; window.imb_FormModal.document.getElementById("imb_Body").innerHTML = "<input type=submit id=imb_Ok name=imb_Ok value=/" 确定 /" style=/"font:12px/" onclick=/"SetModalResult(1)/" shortKey=/"T/">   <input type=button id=imb_Cancel name=imb_Cancel value=/" 取消 /" style=/"font:12px/" onclick=/"SetModalResult(0)/" shortKey=/"C/">"; //document.body.disabled = true; } }

var DialogCallBackFunc = null;

function CheckDialogModalResult(Ret) { if (DialogCallBackFunc!=null && DialogCallBackFunc!="") eval(DialogCallBackFunc.replace("$",Ret)); }

// 弹出模态对话框，用户点击确认返回True，否则返回False function ShowConfirmDialog(msg, callbackfunc) { checkIMBObject(); DialogCallBackFunc = callbackfunc; var Br = new innerMessageBox(); Br.ShowModal("提示信息", msg, 300, 160); }

如果再执行显示层脚本的时候,如果页面还没有加载,那么会出现错误,说,http://您的域名/index.aspx没有找到,其实这个错误.