我正在尝试自己创建一个弹出窗口。我希望我的弹出框在按下按钮时出现,并且下面的所有内容都变暗。但是,当我按我的按钮时,整个页面都会挂起,也不会出现弹出窗口。
如果我删除将所有背景变为黑色的div,则我的弹出窗口工作正常。
这是我的html代码,其中包含脚本标签
let visible = false;
$('#showBox').on('click', function(params) {
if (visible) {
$('.box').removeClass('boxVisible');
$('.blackenBackground').removeClass('boxVisible');
visible = false;
} else {
$('.box').addClass('boxVisible');
$('.blackenBackground').addClass('boxVisible');
visible = true;
}
})
.box {
background: pink;
height: 500px;
width: 500px;
position: absolute;
top: 50%;
left: 50%;
z-index: 3;
transform: translate(-50%, -50%);
border-radius: 1%;
opacity: 0;
transition: 0.4s;
transition-timing-function: ease-out;
}
.boxVisible {
opacity: 1;
}
.blackenBackground {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
background: black;
opacity: 0;
z-index: 2;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box"></div>
<p>Some lorem text.....
</p>
<button id="showBox">Show Box</button>
<!-- When I remove this popup box works perfectly but background isn't darkening and my page hangs -->
<div class="blackenBackground"></div>
答案 0 :(得分:2)
您的固定位置div阻止了鼠标事件。不透明度为0,但该框在技术上仍然可见,从而可以捕获单击并防止单击按钮。
只需确保该框完全隐藏即可使用。
let visible = false;
$('#showBox').on('click', function (params) {
if(visible){
$('.box').removeClass('boxVisible');
$('.blackenBackground').removeClass('boxVisible');
visible = false;
}else{
$('.box').addClass('boxVisible');
$('.blackenBackground').addClass('boxVisible');
visible = true;
}
})
.box{
background: pink;
height: 500px;
width: 500px;
position: absolute;
top: 50%;
left: 50%;
z-index: 3;
transform: translate(-50%, -50%);
border-radius: 1%;
opacity: 0;
transition: 0.4s;
transition-timing-function: ease-out;
}
.boxVisible{
opacity: 1;
display: block;
}
.blackenBackground{
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
background: black;
opacity: 0;
display: none;
z-index: 2;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box"></div>
<p>Some lorem text.....</p>
<button id="showBox">Show Box</button>
<div class="blackenBackground"></div>
答案 1 :(得分:1)
您想要这样的东西吗?我在id
中添加了div
元素,并在document.getElementById('dimmer').style.display= 'none / block'
语句中将Jquery中的addclass调用更改为if-else
,并将.css
类更改为>
.blackenBackground{
pointer-events: none;
background:#000;
opacity:0.5;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
display:none;
}
jsFiddle:https://jsfiddle.net/j0d8emsc/