javascript - 我的模态 div 没有关闭

Question

因此，我将在此处向用户显示库存。我从互联网上获得了一些 CSS 代码，并根据需要对其进行了修改。虽然它确实打开了，但它并没有关闭。

下面是让它工作的代码片段:

HTML

<div id="openModal" class="modalDialog">
            <div>
                <a href="#close" title="Close" class="close">X</a>
            </div>
        </div>
</div>  

CSS

.modalDialog{
            position: fixed;
            font-family: sans;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background: rgba(0,0,0,0.5);
            z-index: 99999;
            opacity: 0;
            -webkit-transition: opacity 400ms ease-in;
            -moz-transition: opacity 400ms ease-in;
            transition: opacity 400ms ease-in;
            pointer-events: none;
        }       
        .modalDialog:target{
            opacity: 1;
            pointer-events: visible;
        }
        .modalDialog > div {
            width: 400px;
            height: 400px;
            position: relative;
            margin: 10% auto;
            padding: 5px 20px 13px 20px;
            border-radius: 10px;
            background: #fff;
            background: -moz-linear-gradient(#fff, #999);
            background: -webkit-linear-gradient(#fff, #999);
            background: -o-linear-gradient(#fff, #999);
        }
        .close {
            background: #606061;
            color: #FFFFFF;
            line-height: 25px;
            position: absolute;
            right: -12px;
            text-align: center;
            top: -10px;
            width: 24px;
            text-decoration: none;
            font-weight: bold;
            -webkit-border-radius: 12px;
            -moz-border-radius: 12px;
            border-radius: 12px;
            -moz-box-shadow: 1px 1px 3px #000;
            -webkit-box-shadow: 1px 1px 3px #000;
            box-shadow: 1px 1px 3px #000;
        }
        .close:hover { background: #00d9ff; }  

JavaScript

switch(where){
                case "north":
                    if(startingPos>=3){
                        startingPos -= 3;
                        status.innerHTML = messages[startingPos];
                        img.setAttribute("src",images[startingPos]);
                    }else{
                        status.innerHTML = blockedPathMsg[startingPos];
                    }
                    break;
                case "east":
                    if(startingPos%3!=2){
                        startingPos += 1;
                        status.innerHTML = messages[startingPos];
                        img.setAttribute("src",images[startingPos]);
                    }else{
                        status.innerHTML = blockedPathMsg[startingPos];
                    }
                    break;
                case "west":
                    if(startingPos%3!=0){
                        startingPos -= 1;
                        status.innerHTML = messages[startingPos];
                        img.setAttribute("src",images[startingPos]);
                    }else{
                        status.innerHTML = blockedPathMsg[startingPos];
                    }
                    break;
                case "south":
                    if(startingPos<6){
                        startingPos += 3;
                        status.innerHTML = messages[startingPos];
                        img.setAttribute("src",images[startingPos]);
                    }else{
                        status.innerHTML = blockedPathMsg[startingPos];
                    }
                    break;
                case "inventory":
                    var openModal = document.querySelector("#openModal");
                    openModal.style.opacity="1";
                    break;
                default:
                    status.innerHTML = "I do not know that";
            }  

出了什么问题？为什么它不起作用？

Answer 1

当关闭按钮被点击时你必须做一些事情:

window.onload = function () {
    var close_btns = document.querySelectorAll("#openModal a.close");
    for (var i = 0; i < close_btns.length; i++) {
        close_btns[i].onclick = function () {
            document.getElementById("openModal").style.display = "none";
        };
    }
};

在 querySelector 上使用 querySelectorAll 可能有点矫枉过正，但我​​不想假设总是只有 1 个 .close 元素。

而且肯定可以改进/扩展以找到 .modalDialog 元素内的所有 .close 元素，并在单击时隐藏它们的 .modalDialog 容器。我觉得没有必要展示，因为没有提供足够的信息。

当然，我会使用 addEventListener/attachEvent 而不是设置 onclick 属性。

引用资料:

• > https://developer.mozilla.org/en-US/docs/DOM/Document.querySelectorAll
• > https://developer.mozilla.org/en-US/docs/DOM/EventTarget.addEventListener

如果这些模态框是动态添加的(或者 .close 元素是动态添加的)，你要么需要在添加后立即绑定(bind)它们的事件，要么使用事件委托(delegate)。您应该确定最近的包含稳定元素，并使用它(container，在下文中)。

window.onload = function () {
    var container = document.getElementById("container");
    container.onclick = function (e) {
        e = e || window.event;
        var target = e.target || e.srcElement;
        if (~(" " + target.className + " ").indexOf(" close ")) {
            // Your code to hide the parent modal
        }
    };
};

一种无需在 id 中进行硬编码即可获得最近的父模态容器的方法是:

var target = e.target || e.srcElement;
var pNode = target.parentNode;
while (pNode) {
    if (~(" " + target.parentNode.className + " ").indexOf(" modalDialog ")) {
        pNode.style.display = "none";
        break;
    }
    pNode = pNode.parentNode;
}