Question

我有一个javascript函数来打开和关闭一个模态，它会检查模态是否打开和关闭但是第一次点击需要2次点击，直到你刷新页面然后你必须再次点击2次。

Javascript：

function ToggleModal(Box) {
        var Modal = document.getElementById(Box);
        var Display = Modal.style.display;

        if(Display == 'none')
        {
            Modal.style.display = 'block';
            document.getElementById('Wrapper').style.overflow = 'hidden';
        }
        else
        {
            Modal.style.display = 'none';
        }
    }

CSS：

.Modal {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../IMG/Modal.png");
    background-repeat: repeat;
    z-index: 2000;
}

我的div：

<div id="Login" class="Modal">
    <div id="LoginForm" class="Form">
        <div class="ModalTitle">Sign In <a href="#" class="Toggle" onclick="ToggleModal('Login');"></a></div>
        <div class="ModalBody">
            <form id="LForm" action="/Assets/PHP/Login/Login.php" method="POST">
                <label for="User">Username:</label>
                <input id="User" type="text" name="User" class="Input" placeholder="Username" />

                <label for="Pass">Password:</label>
                <input id="Pass" type="password" name="Pass" class="Input" placeholder="Password" />
            </form>
            <div class="Clear"></div>
        </div>
    </div>
</div>

Logo div id没有样式。

Answer 1

最有可能的是，初始样式不是“阻止”或“无”。

第一次点击时，(Display == 'none')为false，因此显示设置为“none”（因此您的模态不会显示）。

第二次，(Display == 'none')为真，因此显示设置为“阻止”。

如果是这种情况，您应该可以通过将(Display == 'none')更改为(Display != 'block')来修复此问题。

Javascript函数需要2次点击才能触发

1 个答案: