html点击按钮d出窗口在页面中间怎么实现?

html点击按钮d出窗口在页面中间怎么实现?,第1张

<div class="mask-box"></div>

<div class="dialog-box">

d窗内容

</div>

通过fixed定位实现, ".mask-box" 模拟背景,".dialog-box"作为d窗容器,里面写d窗的内容。

通过控制样式,切换  display:block     display: none实现点击出现、点击关闭d窗。

.mask-box{

/* 切换  display:block     display: none*/

position: fixed

left: 0

right: 0

top: 0

bottom: 0

background:rgba(0,0,0,0.7)

z-index: 98

}

.dialog-box{

/* 切换  display:block     display: none*/

position: fixed

left: 50%

top: 50%

transform: translate(-50%,-50%)

width: 300px

height: 200px

background: #fff

/* 按实际情况 设置z-index */

z-index: 98

}

首先根据需求我们需要一个按钮,一个d出窗口层;\x0d\x0aOK,废话不多说;\x0d\x0a按钮就用一个基本的:\x0d\x0aClick me\x0d\x0a我是浮动的窗口\x0d\x0a\x0d\x0a我们要给浮动层设置一下样式\x0d\x0a.dialog{width:200pxheight:200pxborder:solid 1px #000position:absoluteright:10pxtop:100pxline-height:200pxtext-align:centerdisplay:none}\x0d\x0a\x0d\x0aOK ,下面就是JS部分:\x0d\x0a首先需要引入一个JS库,版本自己定义:\x0d\x0a然后给按钮添加相应的点击事件,让点击button的时候,显示出浮动层\x0d\x0a$(".btn").click(function(){\x0d\x0a$(".dialog").show(100)\x0d\x0a}) 回答于 2022-11-16


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

原文地址: http://outofmemory.cn/zaji/6161004.html

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

发表评论

登录后才能评论

评论列表(0条)

保存