<div onclick = "aa()" id="div1"></div>
2:第二部,定义函数
function aa(){
alert("点击div,触发d窗事件!")
}
默认让一个div是隐藏的、固定位置、悬浮在上,点击按钮的效果,让他显示就行了,没必要非得是另一个页面。如果需要是另一个页面的内容,还得用xmlhttp去获取内容,再写入到相应的位置去。反而还麻烦。
css中设置:
position:fixedz-index:90
top:200px
left:200px
display:none
点击按钮时,把display改为
display:block就行了
<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
}
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)