在asp.net怎么做一个像这样的模态窗口

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了在asp.net怎么做一个像这样的模态窗口相关的知识，希望对你有一定的参考价值。

小弟在此大谢啦。
最好写点代码啦。

参考技术A 主要用的应该是CSS的遮照效果

比如
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
html,bodymargin:0px; padding:0px; text-align:center; font-size:12px; height:100%; line-height:100%; background-image:url(images/bg.jpg); background-repeat:no-repeat;
html,body divborder:0px; margin-left:auto; margin:auto;

#maskwidth:100%; height:100%; line-height:100%; background-color:Black;filter:alpha(opacity=40); opacity:.4; position:absolute; left:0px; right:0px; display:none;
#clearwidth:100%px; height:10%; float:left;
#textwidth:500px; height:300px; float:left; background-color:#9933FF; margin:10px; 0 0 10px;
.showfilter:alpha(opacity=40); opacity:.4;
.hiddenfilter:alpha(opacity=100; opacity:1;
</style>
<script type="text/javascript">
function showss()
document.getElementById("mask").style.display="block";

</script>

<title>无标题文档</title>
</head>

<body>
<div id="mask">

<div id="clear"></div>
</div>
<div id="text"><a href="#" onclick="showss()">点我</a></div>
</body>
</html>

窗体你就根据需要修改就好了。 参考技术B 微软的asp.net ajax扩展包有控件可以做， 参考技术C 这个效果是javascript做的
以下是模态窗体的方法
function ModalDialog(name,divid,width,height,leftop,topop,color)

this.name=name;//名称
this.div=divid;//要放入窗体中的元素名称
this.width=width;//窗体高
this.height=height;//窗体宽
this.leftop=leftop;//左侧位置
this.topop=topop;//上部位置
this.color=color;//整体颜色
this.show=function()//显示窗体

document.all(obj.name+"_divshow").style.width=obj.width;
document.all(obj.name+"_divshow").style.height=obj.height;
document.all(obj.name+"_divshow").style.left=obj.leftop;
document.all(obj.name+"_divshow").style.top=obj.topop;
document.all(obj.name+"_mask").style.width=document.body.clientWidth;
document.all(obj.name+"_mask").style.height=document.body.clientHeight;
document.all(obj.name+"_divshow").style.visibility="visible";
document.all(obj.name+"_mask").style.visibility="visible";


this.close=function()//关闭窗体

document.all(obj.name+"_divshow").style.width=0;
document.all(obj.name+"_divshow").style.height=0;
document.all(obj.name+"_divshow").style.left=0;
document.all(obj.name+"_divshow").style.top=0;
document.all(obj.name+"_mask").style.width=0;
document.all(obj.name+"_mask").style.height=0;
document.all(obj.name+"_divshow").style.visibility="hidden";
document.all(obj.name+"_mask").style.visibility="hidden";


this.toString=function()

var tmp="<div id='"+this.name+"_divshow' style='position:absolute; left:0; top:0;z-index:10; visibility:hidden;width:0;height:0'>";
tmp+="<table cellpadding=0 cellspacing=0 border=0 width=100% height=100%>";
tmp+="<tr height=28>";
tmp+="<td bgcolor='"+obj.color+"' align=right colspan=3>";
tmp+="</td>";
tmp+="</tr>";
tmp+="<tr>";
tmp+="<td bgcolor='"+obj.color+"' width=2></td>";
tmp+="<td bgcolor=#ffffff id='"+this.name+"_content' valign=top> </td>";
tmp+="<td bgcolor='"+obj.color+"'width=2></td>";
tmp+="</tr>";
tmp+="<tr height=2><td bgcolor='"+obj.color+"' colspan=3></td></tr>"
tmp+="</table>";
tmp+="</div>";
tmp+="<div id='"+this.name+"_mask' style='position:absolute; top:0; left:0; width:0; height:0; background:#666; filter:ALPHA(opacity=60); z-index:9; visibility:hidden'></div>";

document.write(tmp);
document.all(this.name+"_content").insertBefore(document.all(this.div));

var obj=this;
本回答被提问者采纳

在asp.net中用response.write方法输出Javascript弹出模态对话框，怎么解决父窗口空白的问题！

我用Menu控件做一个菜单条，当点击某个菜单时想弹出一个模态窗口！我的做法是在菜单点击的消息响应方法当中用写了这么一条代码：Response.Write("<script type='text/javascript'>window.showModalDialog('ModeDialog.aspx','','dialogWidth=300px;dialogHeight=400px;resizable:yes');</script>");
可是在运行的时候，虽然对模态话框弹出来了，但是父窗口当中的所有内容都变在空白了。而只有在当关闭弹出的对话框时，父窗口当中的内容才会显示出来！而我想要的是，在弹出模态对话框的同时，父窗口当中的内容也存在！
请问各位高手帮帮忙！谢谢！

最好不要用
Response.Write("<script type='text/javascript'>window.showModalDialog('ModeDialog.aspx','','dialogWidth=300px;dialogHeight=400px;resizable:yes');</script>");
因为Response.Write输出来的会破坏页面，如果你要是想实现那个效果用这个：
this.Page.ClientScript.RegisterStartupScript("typeof(string)","","脚本",true);追问

谢谢你，老兄！但是我试过了，为什么不起作用呢？？？我依照你的建议，最后改为：
Page.ClientScript.RegisterStartupScript(typeof(string),"","" +
"window.showModalDialog('ModeDialog.aspx','','dialogWidth=300px;dialogHeight=400px;resizable:yes');" +
"",true);
但是在运行它就在本页面当中显示了几个“/】】”！

追答

你写错了啊!
Page.ClientScript.RegisterStartupScript(typeof(string),"","这里面直接写js",true);
比如说：
Page.ClientScript.RegisterStartupScript(typeof(string),"","alert('111111');",true);

追问

哦，谢谢！果然起作用。但是在之前，我设置了菜单控件水平方式排列的。但是在对话框弹出的时候，它又成垂直排列的了，当关闭了对话框之后，它又成水平排列了!这是为什么呀？？高手？？
还有，如果用navigateURL方法来实现，为什么当第一交点击时，不会弹出，一直要到第二次点击，对话框才会弹出呢？？？

追答

我觉得啊，这个就是服务器端控件和客户端控件的区别吧，还有这种弹出窗口的方法也不好，在企业中大部分用的都是客户端的控件，服务器端的控件用的过多的话，在页面的源代码上会有很多的垃圾代码，而且不干净，你说的这种情况是属于正常的现象。
还有你说用了navigateURL这种方法，点一次不行，必须点第二次才能弹出，这个问题，你能把你的那个绑定URL的方法给我看一下吗？

追问

谢谢了，我已经解决了！

 参考技术A 试试ScriptManager.RegisterStartupScript

如果不行，就只能用ajax了追问

对不起，师兄！你可以说得再清楚些吗？？怎么用？？？

追答

ScriptManager.RegisterStartupScript(界面上随便一个服务器控件就成, this.GetType(), "showd", "window.showModalDialog('ModeDialog.aspx','','dialogWidth=300px;dialogHeight=400px;resizable:yes');", true);

以上是关于在asp.net怎么做一个像这样的模态窗口的主要内容，如果未能解决你的问题，请参考以下文章

ASP.NET Core 5 MVC：在模态窗口之前验证表单

ASP.NET MVC 在 jQuery 数据表中使用带有按钮 onclick 的模态弹出窗口

如何通过javascript调用带有bootstrap 5的模态窗口？

单击窗口外覆盖时如何关闭 Kendo UI 模态窗口？

在asp.net中window.showModalDialog弹出窗口,关闭之后怎么刷新主窗口

在wagtail-admin中有打开模态窗口的正确方法吗？