0

在此处输入图像描述

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

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

4

2 回答 2

3

单击关闭按钮时,您必须执行一些操作:

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

使用querySelectorAllover可能有点矫枉过正querySelector,但我​​不想假设总是只有 1 个.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;
}
于 2013-04-15T16:13:40.267 回答
1

它在哪里关闭JS中的窗口?我看到在“库存”的情况下不透明度设置为 1,但在任何地方都没有看到它被设置回 0。也许您缺少 js 代码的那部分,例如关闭按钮的单击事件。在 jQuery 中,它会是这样的:

$("#close").live("click").closest("#openModal").css("opacity", "0")
于 2013-04-15T16:17:38.503 回答