81,092
社区成员
发帖
与我相关
我的任务
分享求JS写弹出框思路或样例代码(有阻塞的那种)
需求要一弹出框,用于修改数据。
知道可用DIV实现,但是不能阻塞线页面
想要写一个弹出框,让用户只能在弹出框的范围操作
求高手解决!
知道可用DIV实现,但是不能阻塞线页面
想要写一个弹出框,让用户只能在弹出框的范围操作
求高手解决!
...全文
请发表友善的回复…
发表回复
zkf53064 2012-04-27
- 打赏
- 举报
好像是挺简单的,试试看，谢谢几位!
不关橙猫猫事的哦 2012-04-27
- 打赏
- 举报
<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>
CloudX2019 2012-04-27
- 打赏
- 举报
页面比较简陋
其实只要把3个样式拿去就可以了
其实只要把3个样式拿去就可以了
CloudX2019 2012-04-27
- 打赏
- 举报
<!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>
zkf53064 2012-04-27
- 打赏
- 举报
好像是一个方法,那事实是这么实现的么？
CloudX2019 2012-04-27
- 打赏
- 举报
额
写一个div1 将页面覆盖
然后在这个div1上面一层在加一个div2
div2的内容 自己写
写一个div1 将页面覆盖
然后在这个div1上面一层在加一个div2
div2的内容 自己写
zkf53064 2012-04-27
- 打赏
- 举报
我不知道你说的模态窗口是什么东西,
是像确认框那种么 但是内容是自已指定的,
是不是?
是像确认框那种么 但是内容是自已指定的,
是不是?
liuzhong0 2012-04-27
- 打赏
- 举报
那你其实可以写一个弹出窗口是模态的不就行了吗？
