求JS写弹出框思路或样例代码(有阻塞的那种)
需求要一弹出框,用于修改数据。
知道可用DIV实现,但是不能阻塞线页面
想要写一个弹出框,让用户只能在弹出框的范围操作
求高手解决!
[解决办法]
额
写一个div1 将页面覆盖
然后在这个div1上面一层在加一个div2
div2的内容 自己写
[解决办法]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>测试首页</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <script src="js/jquery-1.3.2.js" type="text/javascript" language="javascript"></script> <style type="text/css"> a{color:blue;} #divBgReg{ background:#FFFFFF none repeat scroll 0 0; height:100%; left:0; top:0; width:100%; filter:alpha(opacity=80);/* IE */ -moz-opactiy:0.8; /* Moz + FF */ z-index=:10000; } #divReg{ width:326px; height:306px; margin:-200px 0 0 -200px; left:50%; top:50%; position:absolute; background:#FFF; z-index:10001; border:3px solid #1B5BAC; } #divClose{ text-align:right; background:D4D0C8; right:10px; top:10px; width:100%; height:20px; overflow:hidden; cursor:pointer; } </style> <script type="text/javascript"> function myReg(){ $("#divReg").show(); $("#divBgReg").show(); } function closeReg(){ $("#divReg").hide() $("#divBgReg").hide(); } function checkReg(myForm){ if(!checkNull(myForm)){ return false; } if(myForm.Rpass.value==null || myForm.Rpass.value==""){ alert("重复密码不能为空"); myForm.Rpass.focus(); return false; } if(myForm.Rpass.value!=myForm.userpass.value){ alert("重复密码与密码不一致"); return false; } return true; } function checkNull(myForm){ if(myForm.username.value==null || myForm.username.value==""){ alert("用户名不能为空"); myForm.username.focus(); return false; } if(myForm.userpass.value==null || myForm.userpass.value==""){ alert("密码不能为空"); myForm.userpass.focus(); return false; } return true; } function check(){ var sel = document.getElementById("abc"); for(var i=0 ;i<sel.options.length;i++){ if(sel.options[i].value==3){ sel.options[i].selected=true; } } } </script> </head> <body style="text-align:center;"> <div id="divReg" style="display:none;"> <div id="divClose"><a href="#" onclick="closeReg()">关闭</a></div> <div id="divRegContent" style="align:center;"> <form name="regForm" action="" onsubmit="return checkReg(this)" method="post"> <table style="height:200;width:250;" > <thead> <th colspan="2"></th> </thead> <tr> <td width="30%">用户名</td> <td width="70%"><input type="text" name="username"/></td> </tr> <tr> <td width="30%">密 码</td> <td width="70%"><input name="userpass" type="password"/></td> </tr> <tr> <td width="30%">重复密码</td> <td width="70%"><input name="Rpass" type="password"/></td> </tr> <tr> <td colspan="2" align="center"><input type="submit" value=" 注 册 "></td> </tr> </table> </form> </div> </div> <div id="divBgReg" style="position:absolute;display:none;"></div> 这个是首页<br> <form action="" name="loginForm" onsubmit="return checkNull(this)" method="post"> 用户名：<input type="text" name="username" /><br><br> 密 码：<input type="password" name="userpass" /><br><br> <input type="submit" value=" 登 录 " /> <input type="button" value=" 注 册 " onclick="myReg()" /> </form> </body></html>
[解决办法]
页面比较简陋
其实只要把3个样式拿去就可以了
[解决办法]
<html> <head> <script> function reSizeWindow() { var shadow = document.getElementById("shadow"); var dialog = document.getElementById("dialog"); shadow.style.width = parseInt(document.body.clientWidth) + parseInt(document.body.scrollLeft); shadow.style.height = parseInt(document.body.clientHeight) + parseInt(document.body.scrollTop); dialog.style.left = parseInt(document.body.clientWidth)/2 - parseInt(dialog.style.width)/2 + parseInt(document.body.scrollLeft); dialog.style.top = parseInt(document.body.clientHeight)/2 - parseInt(dialog.style.height)/2 + parseInt(document.body.scrollTop); } function openWindow() { document.getElementById("shadow").style.display = "block"; document.getElementById("dialog").style.display = "block"; reSizeWindow(); } function closeWindow() { document.getElementById("shadow").style.display = "none"; document.getElementById("dialog").style.display = "none"; } </script> <style type="text/css"> .dialogStyle { background:red; position:absolute; display:none; text-align:right; z-index:2; } .shadowStyle { position:absolute; left:0px; top:0px; display:none; filter:alpha(opacity=30); opacity:0.3; background:gray; z-index:1; } </style> </head> <body style="margin:0px 0px 0px 0px;"> <input type="button" onclick="openWindow()" value="open" style="margin-left:100px;margin-top:100px;"/> <div id="dialog" class="dialogStyle" style="width:200px;height:200px;"> <input type="button" value="close" onclick="closeWindow()"/> </div> <div id="shadow" class="shadowStyle"> </div> <!--width:200px;height:200px;background:red;position:absolute;display:none;text-align:right;z-index:2;--> <!--position:absolute;left:0px;top:0px;display:none;filter:alpha(opacity=30);opacity:0.3;background:gray;z-index:1;--> <script> window.onresize = function() { reSizeWindow(); } window.onscroll = function() { reSizeWindow(); } for(var i = 0;i < 100;i++) { document.write("<br/>"+i); } </script> </body></html>