0

我有一个 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 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 没有样式。

4

1 回答 1

4

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

第一次单击时(Display == 'none')为假，因此显示设置为“无”（因此您的模式不会出现）。

第二次，(Display == 'none')是真的，所以显示设置为“阻止”。

如果是这种情况，您应该可以通过更改(Display == 'none')为(Display != 'block').

于 2013-04-09T23:48:05.690 回答