代码之家 › 专栏 › 技术社区 › Adam Beleko

事件.停止播放覆盖事件.目标

html jquery javascript

Adam Beleko · 技术社区 · 7 年前

我试图编写一个Javascript代码,当用户在modals外单击时关闭modals。代码如下:

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

modals 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";
}

0 回复 | 直到 7 年前