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')はfalseなので、表示は「なし」に設定されます（モーダルは表示されません）。

2回目(Display == 'none')は真なので、表示は「ブロック」に設定されています。

(Display == 'none')その場合は、に変更することで修正できるはずです(Display != 'block')。

于 2013-04-09T23:48:05.690 に答える