Question

当用户在模态之外单击时，我试图编写Javascript代码以关闭模态。这是代码：

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modalo) {
        modalo.style.display = "none";
    } else if (event.target == modal) {
        modal.style.display = "none";
    } else if (event.target == yesnomodal) {
        yesnomodal.style.display = "none";
    } else if (event.target == errmodal) {
        errmodal.style.display = "none";
    }
}

此代码将一直有效，直到添加了另一个用于在用户单击某些按钮时显示一些弹出窗口的代码。代码是：

var x = document.getElementById("bell_svg_dropdown_menu");
var y = document.getElementById("home_svg_dropdown_menu");

function bellSvgDropdown(t) {
    if (t && x.className.indexOf("w3-show") == -1) {
        x.className += " w3-show";
        y.className = y.className.replace(" w3-show", "");
    } else {
        x.className = x.className.replace(" w3-show", "");
    }
    event.stopPropagation();
}

function homeSvgDropdown(t) {
    if (t && y.className.indexOf("w3-show") == -1) {
        y.className += " w3-show";
        x.className = x.className.replace(" w3-show", "");
    } else {
        y.className = y.className.replace(" w3-show", "");
    }
    event.stopPropagation();
}

现在，将显示弹出窗口，但是无法通过在模态外部单击来关闭模态。我的观察是event.stopPropagation会覆盖event.target。我应该如何重写我的代码来解决这个问题？

弹出窗口的HTML是：

<div class="inline_block">
                <div style="display:inline-block; margin:6.5px; position:relative;" class="">
                    <div class="w3-dropdown-click">
                        <svg onclick="homeSvgDropdown(true)" fill="#20b2aa" height="40" viewBox="0 0 24 24" width="40" xmlns="http://www.w3.org/2000/svg">
                            <foreignObject x="0" y="0" width="10" height="10">
                                <div id="" class="in_svg_notification">5</div>
                            </foreignObject>
                            <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
                            <path d="M0 0h24v24H0z" fill="none"/>
                        </svg>
                        <div id="home_svg_dropdown_menu" class="w3-dropdown-content w3-bar-block w3-border" style="width: 350px;">
                            <a href="#" class="w3-bar-item w3-button">Customer 1 wants to rent</a>
                            <a href="#" class="w3-bar-item w3-button">Customer 2 wants to rent</a>
                            <a href="#" class="w3-bar-item w3-button">Customer 3 wants to rent</a>
                        </div>
                    </div>
                </div>
                <div style="display:inline-block; margin:6.5px; position:relative;" class="">
                    <div class="w3-dropdown-click">
                        <svg onclick="bellSvgDropdown(true)" fill="#20b2aa" height="40" viewBox="0 0 24 24" width="40" xmlns="http://www.w3.org/2000/svg">
                            <foreignObject x="0" y="0" width="10" height="10">
                                <div id="" class="in_svg_notification">5</div>
                            </foreignObject>
                            <path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z"/>
                        </svg>
                        <div id="bell_svg_dropdown_menu" class="w3-dropdown-content w3-bar-block w3-border" style="width: 350px;">
                            <a href="#" class="w3-bar-item w3-button">Customer 1 wants to rent</a>
                            <a href="#" class="w3-bar-item w3-button">Customer 2 wants to rent</a>
                            <a href="#" class="w3-bar-item w3-button">Customer 3 wants to rent</a>
                        </div>
                    </div>
                </div>
            </div>

其中一种模式的HTML是：

<!-- The Modal -->
                    <div id="myModalSignUp" class="modal">

                        <!-- Modal content -->
                        <div class="modal-content">
                            <span class="close1">&times;</span>
                            <div style="font-size:30px; font-weight:bold; color:#008B8B;">Register as owner..</div>

                            <div style="margin:auto; margin-bottom:20px;">
                                <form class="" action="" method="post" autocomplete="on">
                                    <div><input class="modalin" type="text" placeholder="First name"></div>
                                    <div><input class="modalin" type="text" placeholder="Middle name"></div>
                                    <div><input class="modalin" type="text" placeholder="Last name"></div>
                                    <div><input class="modalin" type="tel" placeholder="Phone" pattern="([0]{1}[6|7]{1}[1-9]{1}[0-9]{7})?"></div>
                                    <div style="line-height:22px; padding:8px 5%; font-size:12.5px;">By clicking Join now, you agree to the <b>Brentles</b> User Agreement, Privacy Policy, and Cookie Policy.</div>
                                    <div style="line-height:0px;"><input class="modal_sign_btn" type="submit" value="Enter"></div>
                                </form>
                            </div>
                        </div>

                    </div>

模态javascript之前带有以下代码：

    // Get the modal
var modal = document.getElementById('myModal');

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal
btn.onclick = function() {
    modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
    modal.style.display = "none";
}

event.stopPropagation覆盖event.target

0 个答案: