gpt4 book ai didi

javascript - 如何从外部关闭非模态覆盖对话框

转载 作者:太空宇宙 更新时间:2023-11-04 11:07:54 24 4
gpt4 key购买 nike

我希望能够使用外部按钮切换覆盖对话框。问题是,当覆盖对话框打开时,它会阻止鼠标访问按钮。是否可以在不使用其数据类的情况下模仿 Bootstrap 模态响应?是否可以使用 CSS、jQuery 或 javaScript 来绕过这种模式行为?这是代码:

<!DOCTYPE html>
<html>
<head>
<link href="css/bootstrap.min.css" rel="stylesheet">
<style>
.nonmodals {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10000;
}
</style>
</head>
<body onload="HideModals()">
<a type="button" onclick="ToggleReserve()" class="btn btn-primary">Toggle Overlay</a>
<div id="reserveform" class="nonmodals" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times; </button>
<h4 class="modal-title">The Header</h4>
</div>
<div class="modal-body">
<div>
<h3>Hello!</h3>
<form class="form-horizontal" role="form">
<div class="form-group">
<div class="col-sm-offset-2">
<button type="submit" class="btn btn- primary">Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
<script src="js/bootstrap.min.js"></script>
<script>
function ToggleReserve() {
$("#reserveform").toggle(500);
}
function HideModals() {
$('.nonmodals').css('display', 'none');
}
</script>
</body>
</html>

最佳答案

不知道你为什么要这样做,但你可以用来做它的 css 是

pointer-events: none;

将其添加到您的“保留表格”div。任何鼠标点击都会通过 div 到达下面的内容。如果您需要一些点击不落空,则必须为这些元素重新设置指针事件样式。

关于javascript - 如何从外部关闭非模态覆盖对话框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33817595/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com