html中,怎么做一个d出式的大小固定的小窗口?

html中,怎么做一个d出式的大小固定的小窗口?,第1张

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出了提示框。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://www.outofmemory.cn/yw/13339093.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-07-17
下一篇 2023-07-17

发表评论

登录后才能评论

评论列表(0条)

保存