HTML5 Modal Dialog is showing shortly on page load, how can i stop this?

Question

I've added an HTML5 modal dialog box to login, it can be "opened" after clicking on a link.

But when I load my page, I can see the dialog box shortly which was not my intention.

How can I stop it from "loading" at the page load?

Thanks in advance,

link to webpage: http://www.solar-sell.eu/

(the button to display the modal dialog is in the bottom right corner)

Kind Regards,

jdank

Code from where it is loading:

<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

Couldn't you set visibility: hidden and then show it before the opacity animations onclick?

Answer 2

Well of anyone is interested I'm using the same modal popup and the way I solved it was setting the modal window visibility: none and then reseting it to visible when anyone click on the link. This is the code:

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