html - HTML5 模态对话框在页面加载时很快显示，我该如何阻止它？

Question

我添加了一个 HTML5 模式对话框来登录，单击链接后可以“打开”它。

但是当我加载我的页面时，我很快就会看到对话框，这不是我的意图。

如何在页面加载时阻止它“加载”？

提前致谢，

网页链接：http: //www.solar-sell.eu/

（显示模态对话框的按钮在右下角）

亲切的问候，

jdank

加载它的代码：

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

Answer 1

你不能visibility: hidden在点击不透明动画之前设置然后显示它吗？

Answer 2

任何人都感兴趣我正在使用相同的模态弹出窗口，我解决它的方法是设置模态窗口可见性：无，然后在任何人单击链接时将其重置为可见。这是代码：

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