Question

enter image description here

所以，这是我将向用户显示库存的地方。我从互联网上获得了一些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";
        };
    }
};

使用querySelectorAll而不是querySelector可能有点过分，但我不想假设总有一个.close元素。

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

当然，我使用addEventListener / attachEvent代替设置onclick属性。

参考文献：

如果动态添加这些模态（或动态添加.close元素），则需要在添加事件后立即绑定事件，或使用事件委派。您应该确定最接近的包含，稳定元素，并使用它（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;
}

Answer 2

它关闭JS中的窗口在哪里？我看到在“库存”情况下不透明度设置为1，但没有看到它在任何地方都被设置为0。也许你错过了js代码的那部分，比如关闭按钮的click事件。在jQuery中，它类似于：

$("#close").live("click").closest("#openModal").css("opacity", "0")

我的模态div不会关闭

HTML

CSS

JavaScript

2 个答案: