像我这样的问题太多了，连我都翻过了this也有链接。但我还没有找到合适的解决方案。所以我在这里发布我的问题。
单击图标时我必须弹出一条消息，当我单击图标所在的同一个 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 之上。该“disabler”div 与通常关闭弹出窗口的按钮具有相同的点击处理程序。因此，如果用户单击“X”关闭，“确定”按钮(或您设置的任何内容)或弹出窗口外的区域，效果相同，它会关闭。
通过设置不透明度，“禁用”div(它有效地禁用除弹出窗口之外的整个应用程序)可以完全透明或半透明。
您将“disabler”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>
关于javascript - 如何通过使用javascript在外部单击来隐藏弹出窗口，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44055294/