asp.net 如何在按钮的后台的click事件中弹出前台的div

jt9079 2009-12-12 10:40:07

并且弹出div后，遮住整个framset，等后台处理完后，自动关闭div，原html页面恢复

...全文

613 23 打赏收藏转发到动态举报

写回复

用AI写文章

23 条回复

切换为时间正序

请发表友善的回复…

发表回复

jt9079 2009-12-21

打赏
举报

顶上来。。。

优秀。 2009-12-21

打赏
举报



<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题页</title>

<style>

* {margin:0;}

body {font-size:9pt;}

#container div{margin-top:6px;}

#select_city h3{float:left;}

#main_city,#all_province {clear:both;}

#main_city div,#all_province div{width:588px;clear:left;}

#main_city h4,#all_province h4{float:left;display:inline;font-size:16px;}

#main_city div span,#all_province div span{margin:0 9px;cursor:pointer;font-size:14px;}

#float_lay{width:220px;height:122px;border:1px #787878 solid;position:absolute;background:#fff;z-index:999;display:none;}

</style>

<script type="text/javascript">

//弹出层

function openLayer(objId,conId){

var arrayPageSize   = getPageSize();//调用getPageSize()函数

var arrayPageScroll = getPageScroll();//调用getPageScroll()函数

if (!document.getElementById("popupAddr")){

//创建弹出内容层

var popupDiv = document.createElement("div");

//给这个元素设置属性与样式

popupDiv.setAttribute("id","popupAddr")

popupDiv.style.position = "absolute";

popupDiv.style.border = "1px solid #ccc";

popupDiv.style.background = "#fff";

popupDiv.style.zIndex = 99;

//创建弹出背景层

var bodyBack = document.createElement("div");

bodyBack.setAttribute("id","bodybg")

bodyBack.style.position = "absolute";

bodyBack.style.width = "100%";

bodyBack.style.height = (arrayPageSize[1] + 35 + 'px');

bodyBack.style.zIndex = 98;

bodyBack.style.top = 0;

bodyBack.style.left = 0;

bodyBack.style.filter = "alpha(opacity=50)";

bodyBack.style.opacity = 0.5;

bodyBack.style.background = "#ddf";

//实现弹出(插入到目标元素之后)

var mybody = document.getElementById(objId);

insertAfter(popupDiv,mybody);//执行函数insertAfter()

insertAfter(bodyBack,mybody);//执行函数insertAfter()

}

//显示背景层

document.getElementById("bodybg").style.display = "";

//显示内容层

var popObj=document.getElementById("popupAddr")

popObj.innerHTML = document.getElementById(conId).innerHTML;

popObj.style.display = "";

//让弹出层在页面中垂直左右居中(统一)

// popObj.style.width  = "600px";

// popObj.style.height = "400px";

// popObj.style.top  = arrayPageScroll[1] + (arrayPageSize[3] - 35 - 400) / 2 + 'px';

// popObj.style.left = (arrayPageSize[0] - 20 - 600) / 2 + 'px';

//让弹出层在页面中垂直左右居中(个性)

var arrayConSize=getConSize(conId)

popObj.style.top  = arrayPageScroll[1] + (arrayPageSize[3] - arrayConSize[1]) / 2-50 + 'px';

popObj.style.left = (arrayPageSize[0] - arrayConSize[0]) / 2 -30 + 'px';

}

//获取内容层内容原始尺寸

function getConSize(conId){

var conObj=document.getElementById(conId)

conObj.style.position = "absolute";

conObj.style.left=-1000+"px";

conObj.style.display="";

var arrayConSize=[conObj.offsetWidth,conObj.offsetHeight]

conObj.style.display="none";

return arrayConSize;

}

function insertAfter(newElement,targetElement){//插入

var parent = targetElement.parentNode;

if(parent.lastChild == targetElement){

parent.appendChild(newElement);

}

else{

parent.insertBefore(newElement,targetElement.nextSibling);

}

}

//获取滚动条的高度

function getPageScroll(){

var yScroll;

if (self.pageYOffset) {

yScroll = self.pageYOffset;

} else if (document.documentElement  &&  document.documentElement.scrollTop){

yScroll = document.documentElement.scrollTop;

} else if (document.body) {

yScroll = document.body.scrollTop;

}

arrayPageScroll = new Array('',yScroll)

return arrayPageScroll;

}

//获取页面实际大小

function getPageSize(){

var xScroll,yScroll;

if (window.innerHeight  &&  window.scrollMaxY){

xScroll = document.body.scrollWidth;

yScroll = window.innerHeight + window.scrollMaxY;

} else if (document.body.scrollHeight > document.body.offsetHeight){

sScroll = document.body.scrollWidth;

yScroll = document.body.scrollHeight;

} else {

xScroll = document.body.offsetWidth;

yScroll = document.body.offsetHeight;

}

var windowWidth,windowHeight;

//var pageHeight,pageWidth;

if (self.innerHeight) {

windowWidth = self.innerWidth;

windowHeight = self.innerHeight;

} else if (document.documentElement  &&  document.documentElement.clientHeight) {

windowWidth = document.documentElement.clientWidth;

windowHeight = document.documentElement.clientHeight;

} else if (document.body) {

windowWidth = document.body.clientWidth;

windowHeight = document.body.clientHeight;

}

var pageWidth,pageHeight

if(yScroll < windowHeight){

pageHeight = windowHeight;

} else {

pageHeight = yScroll;

}

if(xScroll < windowWidth) {

pageWidth = windowWidth;

} else {

pageWidth = xScroll;

}

arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight)

return arrayPageSize;

}

//关闭弹出层

function closeLayer(){

document.getElementById("popupAddr").style.display = "none";

document.getElementById("bodybg").style.display = "none";

return false;

}

</script>

<script type="text/javascript">

//对“拖动点”定义：onMousedown="StartDrag(this)" onMouseup="StopDrag(this)" onMousemove="Drag(this)"即可

var move=false,oldcolor,_X,_Y;

function StartDrag(obj){  //定义准备拖拽的函数

obj.setCapture(); //对当前对象的鼠标动作进行跟踪

oldcolor=obj.style.backgroundColor;

obj.style.background="#999";

move=true;

//获取鼠标相对内容层坐标

var parentwin=document.getElementById("popupAddr");

_X=parentwin.offsetLeft-event.clientX

_Y=parentwin.offsetTop-event.clientY

}

function Drag(obj){        //定义拖拽函数

if(move){

var parentwin=document.getElementById("popupAddr");

parentwin.style.left=event.clientX+_X;

parentwin.style.top=event.clientY+_Y;

}

}

function StopDrag(obj){   //定义停止拖拽函数

obj.style.background=oldcolor;

obj.releaseCapture(); //停止对当前对象的鼠标跟踪

move=false;

}

</script>

</head>

<body>

<form runat="server">

<input name="Input"  id="test" value="点击弹出层" type="button" onclick="openLayer('test','test_con')" />

<div id="test_con" style="display:none">

<div id="tab" style="padding:8px;">

<strong></strong>

<div id="tabtop">

<div id="tabtop-R" onclick="closeLayer()"><strong>[取消登陆]</strong></div>

</div>

<div id="tabcontent">  

 <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox><br/><br/>

    

    <asp:TextBox ID="TextBox4" runat="server"></asp:TextBox><br/>

    

    <asp:Button ID="Button2" runat="server" Text="登陆" OnClick="Button2_Click" /></div>

</div>

</div>

<br>

<br>

<input name="Input"  id="test3" value="可拖动层" type="button" onclick="openLayer('test3','test_con3')" />

<div id="test_con3" style="display:none">

<div id="tab3" style="width:360px;height:200px;background:#fee;">

<div id="tabtop3">

<div id="tabtop-L3" onMousedown="StartDrag(this)" onMouseup="StopDrag(this)" onMousemove="Drag(this)"><strong style="color:red;font-size:20px">点击此处拖动</strong></div>

<div id="tabtop-R3" onclick="closeLayer()"><strong>[取消登陆]</strong></div>

</div><br/>

<div id="tabcontent3" style="padding:8px; text-align:center">



    用户名：<asp:TextBox ID="TextBox1" runat="server" Width="102px" Height="17px"></asp:TextBox><br/><br/>

    

    密   码： <asp:TextBox ID="TextBox2" runat="server" Width="102px" TextMode="Password"></asp:TextBox><br/>

    

    <asp:Button ID="Button1" runat="server" Text="登陆" OnClick="Button1_Click" />

</div>

  

</div>

</div>

</form>

</body>

</html>

夺命胖子 2009-12-18

打赏
举报

12楼不是有了吗？

只是需要把这个代码放在最外层的页面中

在button 的 OnClientClick 中通过 top.window.myAlert.style.display = "block";

弹出

执行后台程序完了后，

Page.RegisterStartupScript("show", " <script language='JavaScript'> top.window.myAlert.style.display = "none"; </script>");

不行吗？

jt9079 2009-12-18

打赏
举报

[Quote=引用 18 楼 l274747948 的回复:]
你用panel多好？？？？？？
[/Quote]

PANEL怎么用？？

jt9079 2009-12-18

打赏
举报

最外层的网页是指哪个网页？？
框架中最上面的那个网页吗？

l274747948 2009-12-16

打赏
举报

你用panel多好？？？？？？

yangniao 2009-12-16

打赏
举报

你用框架是framset，如果这个framset有三个页面 a b c d页面， d页面里边framset a b c页面
那么你在找个e页面嵌套d页面这个时候在用一楼,或者其他楼的方法实验下，一般情况下这个问题就解决了

litepos 2009-12-16

打赏
举报

帮顶学习了

xue_bo 2009-12-16

打赏
举报

学习学习

jt9079 2009-12-16

打赏
举报

[Quote=引用 12 楼 zhenhua110 的回复:]
试试这个！
HTML code<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type" content="text/html; charset=gb2312"/><title>弹出提示</title><style>
*{margin:0;padding:0;font-size:12px;}
html,body{height:100%;width:100%;}
#content{background:#f8f8f8;padding:30px;height:100%;}
#content a{font-size:30px;color:#369;font-weight:700;}
#alert{border:1px solid #369;width:300px;height:150px;background:#e2ecf5;z-index:1000;position:absolute;display:none;}
#alert h4{height:20px;background:#369;color:#fff;padding:5px 0 0 5px;}
#alert h4 span{float:left;}
#alert h4 span#close{margin-left:210px;font-weight:500;cursor:pointer;}
#alert p{padding:12px 0 0 30px;}
#alert p input{width:120px;margin-left:20px;}
#alert p input.myinp{border:1px solid #ccc;height:16px;}
#alert p input.sub{width:60px;margin-left:30px;}</style></head><body><divid="content"><ahref="#">注册</a></div><divid="alert"><h4><span>现在注册</span><spanid="close">关闭</span></h4><p><label>用户名</label><inputtype="text" class="myinp" onmouseover="this.style.border='1px solid #f60'" onfoucs="this.style.border='1px solid #f60'" onblur="this.style.border='1px solid #ccc'"/></p><p><label>密　码</label><inputtype="password" class="myinp" onmouseover="this.style.border='1px solid #f60'" onfoucs="this.style.border='1px solid #f60'" onblur="this.style.border='1px solid #ccc'"/></p><p><inputtype="submit" value="注册" class="sub"/><inputtype="reset" value="重置" class="sub"/></p></div><scripttype="text/javascript">var myAlert= document.getElementById("alert");var reg= document.getElementById("content").getElementsByTagName("a")[0];var mClose= document.getElementById("close");
reg.onclick=function()
{
myAlert.style.display="block";
myAlert.style.position="absolute";
myAlert.style.top="50%";
myAlert.style.left="50%";
myAlert.style.marginTop="-75px";
myAlert.style.marginLeft="-150px";

mybg= document.createElement("div");
mybg.setAttribute("id","mybg");
mybg.style.background="#000";
mybg.style.width="100%";
mybg.style.height="100%";
mybg.style.position="absolute";
mybg.style.top="0";
mybg.style.left="0";
mybg.style.zIndex="500";
mybg.style.opacity="0.3";
mybg.style.filter="Alpha(opacity=30)";
document.body.appendChild(mybg);

document.body.style.overflow="hidden";
}

mClose.onclick=function()
{
myAlert.style.display="none";
mybg.style.display="none";
}</script></body></html>
[/Quote]

这个只能遮住按钮所在的那个网页。。
遮不住整个框架。。。
还有人提供一下吗？？

jt9079 2009-12-12

打赏
举报

谢谢各位帮忙。。。
回家测试一下。。。

zhenhua110 2009-12-12

打赏
举报

试试这个！





<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 

<title>弹出提示</title> 

<style> 

* {margin:0;padding:0;font-size:12px;} 

html,body {height:100%;width:100%;} 

#content {background:#f8f8f8;padding:30px;height:100%;} 

#content a {font-size:30px;color:#369;font-weight:700;} 

#alert {border:1px solid #369;width:300px;height:150px;background:#e2ecf5;z-index:1000;position:absolute;display:none;} 

#alert h4 {height:20px;background:#369;color:#fff;padding:5px 0 0 5px;} 

#alert h4 span {float:left;} 

#alert h4 span#close {margin-left:210px;font-weight:500;cursor:pointer;} 

#alert p {padding:12px 0 0 30px;} 

#alert p input {width:120px;margin-left:20px;} 

#alert p input.myinp {border:1px solid #ccc;height:16px;} 

#alert p input.sub {width:60px;margin-left:30px;} 

</style>



</head>



<body> 

<div id="content"> 

<a href="#">注册</a> 

</div> 

<div id="alert"> 

<h4><span>现在注册</span><span id="close">关闭</span></h4> 

<p><label>用户名</label><input type="text" class="myinp" onmouseover="this.style.border='1px solid #f60'" onfoucs="this.style.border='1px solid #f60'" onblur="this.style.border='1px solid #ccc'" /></p> 

<p><label>密　码</label><input type="password" class="myinp" onmouseover="this.style.border='1px solid #f60'" onfoucs="this.style.border='1px solid #f60'" onblur="this.style.border='1px solid #ccc'" /></p> 

<p><input type="submit" value="注册" class="sub" /><input type="reset" value="重置" class="sub" /></p> 

</div> 

<script type="text/javascript"> 

var myAlert = document.getElementById("alert"); 

var reg = document.getElementById("content").getElementsByTagName("a")[0]; 

var mClose = document.getElementById("close"); 

reg.onclick = function() 

{ 

myAlert.style.display = "block"; 

myAlert.style.position = "absolute"; 

myAlert.style.top = "50%"; 

myAlert.style.left = "50%"; 

myAlert.style.marginTop = "-75px"; 

myAlert.style.marginLeft = "-150px";



mybg = document.createElement("div"); 

mybg.setAttribute("id","mybg"); 

mybg.style.background = "#000"; 

mybg.style.width = "100%"; 

mybg.style.height = "100%"; 

mybg.style.position = "absolute"; 

mybg.style.top = "0"; 

mybg.style.left = "0"; 

mybg.style.zIndex = "500"; 

mybg.style.opacity = "0.3"; 

mybg.style.filter = "Alpha(opacity=30)"; 

document.body.appendChild(mybg);



document.body.style.overflow = "hidden"; 

}



mClose.onclick = function() 

{ 

myAlert.style.display = "none"; 

mybg.style.display = "none"; 

} 

</script> 

</body> 

</html>

别样苍茫 2009-12-12

打赏
举报

showdiv的FUNCTION思路是这样的
4个参数 DIV的ID、width、height、是否隐藏属性
{
对应赋值就行了。设置某个DIV的隐藏值，按楼主的想法的话，width和height就不需要设置了，直接在DIV中固定就可以。
}

kevin_xu4365 2009-12-12

打赏
举报

顶楼上

wxd024 2009-12-12

打赏
举报

前台脚本：d是div的ID
<script language='JavaScript'>
function show(d) {
document.getElementById(d).style.display = "";
}
</script>

后台调用：
Page.RegisterStartupScript("show", "<script language='JavaScript'> show('div1');</script>");

jt9079 2009-12-12

打赏
举报

我要实现的是要将整个框架遮住，不是其中的一个网页。。
请知道的人说详细一点吧。。
谢谢。。。

阿彪兄 2009-12-12

打赏
举报

也可以在前台编写弹出div的js,后台Page.RegisterStartUP("","<script>functionName();</script>");

fantapear 2009-12-12

打赏
举报

学习

happy664618843 2009-12-12

打赏
举报

放置一个div设置z-index的位置当点击的时候就设置这个div的宽和高

jt9079 2009-12-12

打赏
举报

[Quote=引用 1 楼 luqc1985 的回复:]
C# code
LinkButton l= (LinkButton)e.Row.FindControl("updata");
DataRowView drv= (DataRowView)e.Row.DataItem ;
labOrder.Text= drv.Row[0].ToString();
l.Attributes.Add("onclick","showdiv('div_all' , 'div?-
[/Quote]

showdiv方法的代码方便提供一下吗？？