Question

有很多像我这样的问题，即使我也通过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>

Answer 1

我发现的最简单的方法是避免遇到任何其他问题，就是将弹出窗口置于100％宽度/高度div之上。 “disabler”div具有与通常关闭弹出窗口的按钮相同的单击处理程序。因此，如果用户单击“X”关闭，“确定”按钮（或您设置的任何内容）或弹出窗口外的区域，效果相同，则关闭。

通过设置不透明度，“禁用”div（它可以有效地禁用除弹出窗口之外的整个应用程序）可以完全清晰或半透明。

你把“disabler”div放在z = 9998，弹出窗口是z = 9999（只是更多CSS），它们总是在顶部。请注意，如果您的所有内容都加载到已经位于禁用程序下方的div中（例如Angular中的router-outlet 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>

Answer 2

以下是执行此操作的方法：

<强>的Javascript

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

<强>的Javascript

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'); );

如何通过使用javascript单击外部来隐藏弹出窗口

2 个答案: