js遮罩层问题

问题描述

想要的功能:我想在页面上点击一个按钮,然后弹出一个遮罩层,遮罩层显示时会绑定遮罩层内gridview的数据出来,然后点击遮罩层的关闭按钮关闭遮罩层。问题描述:使用js代码实现了遮罩层,使用一个<a>和html控件(inputtype=button)打开关闭遮罩层正常,但是如果我换成asp:button控件后查询数据库完成绑定,遮罩层层就不见了,请教这是怎么回事?<styletype="text/css">#fade{display:none;position:fixed;top:0%;left:0%;width:100%;height:100%;background-color:black;z-index:1001;-moz-opacity:0.8;opacity:.80;filter:alpha(opacity=80);}#light{display:none;position:absolute;top:10%;left:15%;width:70%;height:75%;padding:16px;border:3pxsolidorange;background-color:white;z-index:1002;overflow:auto;}</style><scripttype="text/javascript">window.onload=function(){varlinkbt=document.getElementById("btnpreview");varlight=document.getElementById('light');varfade=document.getElementById('fade');varclosebt=document.getElementById("closebt");linkbt.onclick=function(){light.style.display='block';fade.style.display='block';}closebt.onclick=function(){light.style.display='none';fade.style.display='none';}}</script><divid="light">里面有table和gridview等呈现数据的控件<br/><ahref="javascript:void(0)"id="closebt">关闭窗口</a></div><divid="fade"></div>

解决方案

解决方案二:
页面刷新了吗?
解决方案三:
asp.net的button控件,在js里需要<%=this.Button1.ClientID%>这样来获取id的。另外在你的onclick显示和隐藏都加上returntrue;再试试closebt.onclick=function(){light.style.display='none';fade.style.display='none';returntrue;}
解决方案四:
如果你不想触发后台的button事件。那么就returnfalse;

时间: 2024-08-13 17:20:05

js遮罩层问题的相关文章

JS遮罩层效果 兼容ie firefox jQuery遮罩层

 <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.111cn.net/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="cont

html 锁定页面(js遮罩层弹出div效果)_javascript技巧

复制代码 代码如下: <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> <title>UntitledDocument</title> <script> function createIf

js css 实现遮罩层覆盖其他页面元素附图_javascript技巧

<div style=" position: fixed; width: 100%; height: 100%; left: 0px; top: 0px; background-color: Black; z-index: 9999; filter: alpha(opacity=70); Opacity:0.7;"></div> z-index 必须大于遮罩元素 demo <!doctype html> <html> <head&g

基于JavaScript如何制作遮罩层对话框_javascript技巧

1.遮罩层其实就是一个覆盖全界面的半透明的DIV,并处理zIndex使他浮于其他元素之上,是用户不能点击下边的元素,或者说点击没有反应. 2.在遮罩层上方在弹出一个层,由于遮罩层挡住了其他所有元素,用户只能点击弹出层,制造出模式窗口的假象. 废话不多说了,直接给大家贴js代码了. <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type&quo

老生常谈遮罩层 滚动条的问题_javascript技巧

今天遇到的问题是,在弹出层后面的 遮罩层,因为有滚动条,导致滚动条下面不可视区域没有遮罩层,解决方式是加的css. js代码 <script type="text/javascript"> //显示灰色JS遮罩层 function showBg(ct,content){ var bH=$(document).height(); var bW=$("body").width()+16; var objWH=getObjWh(ct); $("#fu

js控制的遮罩层实例介绍

 闲来无事,把项目里很土的弹窗,改成了遮罩层显示,感觉效果好点了.上代码:  父页面:   代码如下: <div id='newDiv1' style="display: none;">  <%@include file='/WEB-INF/jsp/infobackup/martyr/printCertDia.jsp' %>  <%--<jsp:include page="/WEB-INF/jsp/infobackup/martyr/pri

弹出最简单的模式化遮罩层的js代码

 弹出模式化遮罩层的方法有很多,在本文为大家介绍下使用js实现最简单的模式化遮罩层,具体如下,感兴趣的朋友不要错过 假设我们有一个容器container如下:  代码如下: <style type="text/css">  #container{width:auto;height:auto; overflow:hidden;}  /*这里的overflow:hidden;属性主要是为了设置使超出container的部分自动隐藏,之所以设置这个属性,是为了解决ie8及以下版本

js实现遮罩层弹出框的方法

这篇文章主要介绍了js实现遮罩层弹出框的方法,可实现对遮罩层弹出框的样式定义.按钮事件及相关功能的技巧,具有一定参考借鉴价值,需要的朋友可以参考下     本文实例讲述了js实现遮罩层弹出框的方法.分享给大家供大家参考.具体分析如下: 昨天公司网站需要弹窗提示一些信息,要我在把弹窗的js代码和弹窗窗口html写在一起哪里需要就调用 不说那么多了,直接上代码,感觉肯定会有兼容问题,看到了请指出啊:   代码如下: <style> #H-dialog{display:none;position:a

通过遮罩层实现浮层DIV登录的js代码

 遮罩层实现浮层DIV登录的效果,想必很多的朋友都有遇到过吧,实现起来也是很简单的,下面有个不错的实现,大家可以感受下 这个就没什么好说的了..直接上代码啊!!    首先是HTML的代码.其中包含了登录点击按钮以及一个简陋的登录框.     代码如下: <body>  <div id="shade"></div>  <div>  <a onclick="login()" style="cursor:p