html点击按钮d出窗口在页面中间怎么实现？_随笔

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

}

需要准备的材料分别有：电脑、浏览器、html编辑器。

1、首先，打开html编辑器，新建html文件，例如：index.html，输入问题基础代码。

2、在index.html中的<body>标签中，输入js代码：

function fun() {

alert('click success!')

}

3、浏览器运行index.html页面，此时点击按钮d出了提示框。

欢迎分享，转载请注明来源：内存溢出

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