像我这样的问题太多了，即使我也通过这个链接。但我还没有找到合适的解决方案。所以我在这里发布我的问题。
单击图标时，我必须弹出一条消息，当我单击图标所在的同一div时，它应该消失。这工作正常。但是当我在div 外部单击时，弹出窗口应该会消失。我怎样才能修改这个javascript函数来实现它
<div>
<h5 class="haead">Search for a product title
<div class="popup" onclick="myFunction5()"> <img class="qnicon" src="question.png">
<span class="popuptext" id="myPopup5">Search product.</span>
</div>
</h5>
</div>
<script>
function myFunction5() {
var popup = document.getElementById("myPopup5");
popup.classList.toggle("show");
}
</script>
我发现避免您可能遇到的任何其他问题的最简单方法是将弹出窗口放在 100% 宽度/高度div 的顶部。该"禁用器"div 具有与通常会关闭弹出窗口的按钮相同的单击处理程序。因此，如果用户单击"X"关闭，"确定"按钮(或您设置的任何内容)或弹出窗口外的区域，相同的效果，它关闭。
通过设置不透明度，"禁用器"div(它有效地禁用除弹出窗口之外的整个应用程序)可以完全清晰或半透明。
您将"禁用器"div放在z = 9998，弹出窗口放在z = 9999(只是更多的CSS)，它们将始终位于顶部。请注意，如果您的所有内容都加载到已经在禁用器下方的div 中(例如 Angular 中的路由器插座div)，这可能不是必需的，但我通常还是这样做。
完整的基本示例。我通常用它创建一个组件，并将其挂接到事件总线中，这样我就可以将数据传入和传出(这样我就可以更改位置、样式、消息，甚至单击关闭按钮时会发生什么)。如果你得到这段代码，你应该能够在任何框架中使用它的一些近似值，等等。
<html>
<head>
<style>
.button {
text-align: center;
width: 100px;
height: 30px;
background-color: green;
border: 2px solid grey;
color: white;
margin: auto;
position: relative;
}
.disabler {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 99998;
background-color: #000000;
opacity: 0.5;
}
.popup {
position: relative;
/* Center with whatever voodoo you like */
top: calc(50% - 150px);
left: calc(50% - 150px);
width: 300px;
height: 300px;
background-color: blue;
border: 2px solid grey;
z-index: 99999;
}
</style>
</head>
<body>
<div class="button" onclick="togglePopup ( )">
Show Popup
</div>
<div class="button" onclick="showAlert ( )">
Show Alert
</div>
<!-- This div is on top of everything except the popup div -->
<!-- It effectively disables the entire app except for the popup -->
<div id="disabler" class="disabler" onclick="togglePopup ( )"></div>
<!-- This div holds the popup -->
<!-- You can only close the popup by clicking the close button, or the disabler background -->
<!-- Clicking in the blue popup area doesn't do anything (intentionally) -->
<!-- Even though you can see other widgets through the disabler, they're all inaccessible -->
<!-- Try the show alert button to confirm -->
<div id="popup" class="popup">
<div class="button" onclick="togglePopup ( )">
Close Popup
</div>
</div>
<script type="text/javascript">
togglePopup ( ); // Hide them to start.
function togglePopup ( ) {
let disabler = document.getElementById ( 'disabler' );
disabler.style.display = disabler.style.display ? '' : 'none';
let popup = document.getElementById ( 'popup' );
popup.style.display = popup.style.display ? '' : 'none';
}
function showAlert ( ) {
alert ( 'Hey there!' );
}
</script>
</body>
</html>
这是执行此操作的方法：
爪哇语
popup.addEventListener('click',function(e) {
// This is important to prevent the popup from inheriting the event since it
// is inside the body
e.stopPropagation();
});
var body = document.body;
body.addEventListener('click', function(e){
if(popup.classList.contains('show')) {
popup.classList.remove("show");
}
);
我希望这能解决你的问题
编辑
那不起作用，因为您必须像这样正确构建代码：
HTML
<div id='popup-container'>
<!-- This all inside the popup -->
<h5 class="haead">Search for a product title</h5>
<div class="popup-data">
<img class="qnicon" src="question.png">
<span class="popuptext" id="myPopup5">Search product.</span>
</div>
<a href="#" id="show-popup">Show Popup</a>
</div>
爪哇语
var popupContainer = document.getElementById('popup-container');
var body = document.body;
var showPopup = document.getElementById('show-popup');
showPopup.addEventListener('click', function(e) {
e.preventDefault();
popupContainer.classList.add('show');
});
popupContainer.addEventListener('click', function(e) {
e.stopPropagation();
});
body.addEventListener('click', function(e) {
if(popupContainer.classList.contains('show'))
popupContainer.classList.remove('show');
);