html点击div触发d窗事件怎么写代码?

html点击div触发d窗事件怎么写代码?,第1张

1:html代码

<div onclick = "aa()" id="div1"></div>

2:第二部,定义函数

function aa(){

alert("点击div,触发d窗事件!")

}

默认让一个div是隐藏的、固定位置、悬浮在上,点击按钮的效果,让他显示就行了,没必要非得是另一个页面。如果需要是另一个页面的内容,还得用xmlhttp去获取内容,再写入到相应的位置去。反而还麻烦。

css中设置:

position:fixed

z-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

}


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

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

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

发表评论

登录后才能评论

评论列表(0条)

保存