0

ログインに HTML5 モーダル ダイアログ ボックスを追加しました。リンクをクリックした後に「開く」ことができます。

しかし、ページをロードすると、私の意図ではなかったダイアログ ボックスがすぐに表示されます。

ページの読み込み時に「読み込み」を停止するにはどうすればよいですか?

前もって感謝します、

ウェブページへのリンク: http://www.solar-sell.eu/

(モーダルダイアログを表示するボタンは右下にあります)

敬具、

ダンク

ロード元のコード:

<a href="#openModal" class="modallink"><div class="mijnsolarsell"></div></a>

<div id="openModal" class="modalDialog">
    <div>
        <a href="#close" title="Venster sluiten" class="close">X</a>
        <h2>Mijn Solar Sell - Inloggen</h2>
        <form method="POST" action="http://www.solar-sell.eu/">
            <input class="inputinlognaam" type="text" name="username" size="15" />
            <input class="inputwachtwoord" type="password" name="password" size="15" />
            <input class="inlogbutton" value="" type="submit" />
        </form>

    </div>
</div>

CSS:

.modalDialog {
    position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.8);
    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;
}
4

2 に答える 2

0

visibility: hidden不透明度アニメーションonclickの前に設定して表示できませんでしたか？

于 2013-11-02T13:54:06.540 に答える
0

私は同じモーダルポップアップを使用していますが、それを解決する方法は、モーダルウィンドウの可視性を設定することでした: none そして、誰かがリンクをクリックしたときに可視にリセットします。これはコードです：

.modalDialog {

    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.8);
    z-index: 99999;
    opacity:0;
    visibility: hidden;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
    pointer-events: none;
}

.modalDialog:target {
    opacity:1;
    visibility: visible;
    pointer-events: auto;
}

.modalDialog > div {
    width: 400px;
    position: relative;
    margin: 10% auto;
    padding: 5px 20px 13px 20px;
    border-radius: 10px;
    background: #fff;
    color: black;
}

.close {
    background: #606061;
    /*color: #FFFFFF;*/
    color: #CCC;
    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: #FBB03B; }
于 2014-01-31T20:19:06.567 に答える