JavaScript d窗共有三种
1、windowalert("sometext");
2、windowconfirm("sometext");
3、windowprompt("sometext","defaultvalue");
但是这3种方法都不能做一个大小固定的小窗口，要做大小固定的d窗，需要我们自己在HTML文档中编写：
HTML：
btn：点击button后d窗出现
close：点击X后d窗消失
con：是d窗内容区
bk：屏蔽页面其他内容，d窗出现时，d窗的z-index最大，其他内容不能进行 *** 作
CSS：
JQ：
页面展现效果：
1、点击按钮
2、出现一个自己控制的500200的d框，同时浏览区背景为灰色
3、点击红色区域右上角X号，d窗会消失
<!DOCTYPE html><html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="jquery-321minjs"></script>
<style>
</style>
</head>
<body>
<div style="width:250px;height:150px;background-color:#ff6600;">小图</div>
<div style="position:fixed;top:0px;left:0px;height:100%;width:100%;overflow:hidden;background-color:rgba(0,0,0,05);display:none;">
<div style="width:500px;height:300px;background-color:#ff6600;position:fixed;top:50%;left:50%;margin-left:-250px;margin-top:-150px">
大图
</div>
</div>
</body>
</html>
<script>
$(document)ready(function(){
$("div")eq(0)click(function(){
$("div")eq(1)show();
});
$("div")eq(1)click(function(){
$(this)hide();
});
})
</script>
实现原理：display：none/block; 把代码直接复制看效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=10">
<meta >
<title>Document</title>
<style>
{
padding: 0;
margin: 0;
}
firstBox h5 {
font-size: 30px;
color: #000;
font-weight: 700;
}
firstBox table {
border: 1px solid #E6E6E6;
margin: 15px 0px;
}
firstBox table thead {
background: #E6E6E6;
}
firstBox table tr td {
width: 150px;
text-align: center;
}
firstBox button {
width: 100px;
height: 40px;
background: #E6E6E6;
border: 1px solid #C7D3E6;
text-align: center;
line-height: 40px;
font-size: 16px;
color: #000;
cursor: pointer;
}
#twoBox {
margin: 20px 0px 0px;
background: #E6E6E6;
height: 250px;
width: 310px;
position: relative;
display: none;
}
#twoBox twoBox_lever {
width: 290px;
height: 230px;
background: #fff;
border: 1px solid #ccc;
border-radius: 5px;
position: absolute;
right: 0;
top: 0;
left: 0;
bottom: 0;
margin: auto;
}
twoBox_lever_two {
width: calc(100% - 10px);
height: calc(100% - 10px);
padding: 5px;
}
twoBox_lever_two two_title {
width: 100%;
height: 40px;
background: #E6E6E6;
border: 1px solid #ccc;
border-radius: 5px;
}
twoBox_lever_two two_title p {
font-size: 16px;
color: #000;
line-height: 40px;
padding-left: 10px;
font-weight: 700;
}
twoBox_lever_two form {
width: calc(100% - 20px);
margin: 10px;
border-bottom: 1px solid #ccc;
height: calc(100% - 100px);
}
twoBox_lever_two form input {
height: 20px;
line-height: 20px;
padding: 0px 10px;
margin: 5px;
cursor: pointer;
}
twoBox_lever_two two_footer {
height: 40px;
text-align: right;
padding-right: 10px;
}
twoBox_lever_two two_footer button {
height: 30px;
background: #E6E6E6;
border: 1px solid #C7D3E6;
text-align: center;
line-height: 30px;
font-size: 16px;
color: #000;
cursor: pointer;
}
twoBox_lever_two two_footer button:first-of-type {
width: 120px;
padding: 0px 10px;
}
twoBox_lever_two two_footer button:last-of-type {
width: 50px;
}
show {
display: block !important;
}
</style>
</head>
<body>
<div style="margin:10px;">
<!-- 第一部分 -->
<div class="firstBox">
<h5>已有的用户 ：</h5>
<table>
<thead>
<tr>
<th>名字</th>
<th>邮箱</th>
<th>密码</th>
</tr>
</thead>
<tbody>
<tr>
<td>姓名</td>
<td>xingtuan@qqcom</td>
<td>xingtuan</td>
</tr>
</tbody>
</table>
<button id="button">创建新用户</button>
</div>
<!-- 第二部分 -->
<div id="twoBox">
<div class="twoBox_lever">
<div class="twoBox_lever_two">
<div class="two_title">
<p>创建新用户</p>
</div>
<form>
<label style="float:left">名字：
<input type="text" placeholder="请输入名字">
</label>
<label style="float:left">邮箱：
<input type="text" placeholder="请输入邮箱">
</label>
<label style="float:left">密码：
<input type="password" placeholder="请输入密码">
</label>
</form>
<div class="two_footer">
<button>创建一个用户</button>
<button>取消</button>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
windowonload = function () {
documentgetElementById("button")onclick = function () {
documentgetElementById("twoBox")classListadd("show")
}
}
</script>
</html>
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=10">
<title>Document</title>
</head>
<body>
<a href=";
请采纳
<body>
<input type="button" value="无限d窗" onclick="for(var i=0;;i++){alert(i);}" />
</body>
只要你敢点，就是绝对的无限d窗
1、引用jq和cookie，通过cookie判断是否首次打开。
2、定义d出层代码
加入光比代码；3、添加css样式{margin:0;padding:0;list-style-type:none;}a,img{border:0;text-decoration:none;}body{font:12px/180%Arial,Helvetica,sans-serif,\"\";}/advbox/html,htmlbody{background-image:url(about:blank);background-attachment:fixed;}htmladvbox{position:absolute;top:expression(eval(documentdocumentElementscrollTop));}advbox{width:670px;position:fixed;display:none;left:50%;top:0;margin:-215px00-325px;}advboxadvpic{position:relative;height:420px;overflow:hidden;}advboxadvpicclosebtn{display:block;width:40px;height:20px;line-height:20px;font-size:12px;color:#fff;text-indent:12px;overflow:hidden;position:absolute;right:5px;top:0px;z-index:99;}
需要准备的材料分别有：电脑、浏览器、html编辑器。
1、首先，打开html编辑器，新建html文件，例如：indexhtml，输入问题基础代码。
2、在indexhtml中的<body>标签中，输入js代码：
function fun() {
alert('click success!');
}
3、浏览器运行indexhtml页面，此时点击按钮d出了提示框。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）