Modal showing in IE - html

Question

i have this code for display one modal with form for register when click the "log in" button (for phpBB3). Everything is awesome, but in IE the modal appear on page loading withoud my click.. how to resolve this?
/***************
Login Box Dialog
***************/
.loginDialog {
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;
}
.loginDialog:target {
opacity:1;
pointer-events: auto;
}
.loginDialog > div {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}
.closeDialog {
background: #606061;
color: #FFFFFF;
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;
}
.closeDialog:hover { background: #00d9ff; }
.popupWrapper{background:url('ir_red/trans60.png') repeat;background:rgba(0,0,0,0.6);padding:8px;-webkit-box-shadow:rgba(0,0,0,0.5) 0px 10px 20px;-moz-box-shadow:rgba(0,0,0,0.5) 0px 10px 20px;box-shadow:rgba(0,0,0,0.5) 0px 10px 20px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px}
}.popupInner{width:500px;overflow:auto;-webkit-box-shadow:0px 0px 3px rgba(0,0,0,0.4);-moz-box-shadow:0px 0px 3px rgba(0,0,0,0.4);box-shadow:0px 0px 3px rgba(0,0,0,0.4);overflow-x:hidden}.popupInner.black_mode{background:#000;color:#eee;border:3px
solid #626262}.popupInner.warning_mode{border:3px
solid #7D1B1B}.popupInner
h3{border-bottom:1px solid #2a2a2a;text-shadow:rgba(0,0,0,0.8) 0px -1px 0px;background:#282828 url('ir_red/highlight_reallyfaint.png') repeat-x 0 0;padding:8px
10px 9px;font-size:16px;font-weight:300}.popupInner h3
a{color:#fff}.popupInner.black_mode
h3{background-color:#595959;color:#ddd}.popupInner.warning_mode
h3{background-color:#7D1B1B;padding-top:6px;padding-bottom:6px;color:#fff}
<!-- IF not S_USER_LOGGED_IN and not S_IS_BOT -->
<form method="post" class="" action="{S_LOGIN_ACTION}">
<div id="login" class="loginDialog">
<div class="popupWrapper" style="z-index: 10001; top: 76.75px; left: 375px; position: fixed;">
<div id="sign_in_popup_inner" class="popupInner" style="width: 600px; max-height: 645px;">
<div id="inline_login_form">
<h3>Sign In</h3>
<br />
<div class="ipsForm ipsForm_horizontal">
<fieldset>
<ul>
<li class="ipsField">
<div class="ipsField_content">
Need an account? Register now!
</div>
</li>
<li class="ipsField ipsField_primary">
<span class="ipsField_title">Username</span>
<div class="ipsField_content">
<input id="username" class="input_text" name="username" type="text" size="30" tabindex="1" style="font-size: 18px;">
</div>
</li>
<li class="ipsField ipsField_primary">
<span class="ipsField_title">Password</span>
<div class="ipsField_content">
<input id="password" class="input_text" name="password" type="password" size="30" tabindex="2" style="font-size: 18px;"><br />
I've forgotten my password
Resend activation e-mail
</div>
</li>
<!-- IF S_AUTOLOGIN_ENABLED -->
<li class="ipsField ipsField_checkbox">
<input type="checkbox" checked="checked" class="radio" name="autologin" tabindex="3" />
<div class="ipsField_content">
<span class="inline_remember">
<strong>Remember me</strong><br>
<span class="desc lighter">This is not recommended for shared computers</span>
</span>
</div>
</li>
<!-- ENDIF -->
<li class="ipsField ipsField_checkbox">
<input type="checkbox" class="radio" name="viewonline" tabindex="4" />
<div class="ipsField_content">
<span class="inline_invisible">
<strong>Hide my online status this session</strong><br />
<span class="desc lighter">Don't add me to the active users list</span>
</span>
</div>
</li>
</ul>
</fieldset>
</div>
<div class="ipsForm_submit ipsForm_center" style="text-align: center;">
<input type="submit" name="login" class="ipsButton" value="{L_S_SIGN_IN}" style="outline: 0; border: 1px solid #252525;" />
</div>
</div>
</div>
<div id="sign_in_popup_close" class="popupClose clickable"><img src="{T_THEME_PATH}/ir_red/close_popup.png" alt="x"></div></div>
<div id="document_modal" class="modal" style="width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; z-index: 10000; opacity: 0.4; filter: alpha(opacity=40);"></div>
</div>
{S_LOGIN_REDIRECT}
{S_FORM_TOKEN}
</form>
<!-- ENDIF -->
So.. this show correctly but in ie when page is loading (index), the modal appear directly without my click on login.

Answer 1

In IE opacity:0 shows inner child elements,so add the visibility property in your loginDialog class and also in loginDialog:target like this:
.loginDialog {
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;
visibility:hidden; // add this line
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.loginDialog:target {
opacity:1;
visibility:visible; // add this line
pointer-events: auto;
}
Addition
You should have following meta tag declared :
<meta http-equiv="X-UA-Compatible" content="IE=edge">
/***************
Login Box Dialog
***************/
.loginDialog {
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;
display:none; // add this line
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.loginDialog:target {
opacity:1;
pointer-events: auto;
display:block; // add this line
}
.loginDialog > div {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}
.closeDialog {
background: #606061;
color: #FFFFFF;
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;
}
.closeDialog:hover { background: #00d9ff; }
.popupWrapper{background:rgba(0,0,0,0.6);padding:8px;-webkit-box-shadow:rgba(0,0,0,0.5) 0px 10px 20px;-moz-box-shadow:rgba(0,0,0,0.5) 0px 10px 20px;box-shadow:rgba(0,0,0,0.5) 0px 10px 20px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px}
}.popupInner{width:500px;overflow:auto;-webkit-box-shadow:0px 0px 3px rgba(0,0,0,0.4);-moz-box-shadow:0px 0px 3px rgba(0,0,0,0.4);box-shadow:0px 0px 3px rgba(0,0,0,0.4);overflow-x:hidden}.popupInner.black_mode{background:#000;color:#eee;border:3px
solid #626262}.popupInner.warning_mode{border:3px
solid #7D1B1B}.popupInner
h3{border-bottom:1px solid #2a2a2a;text-shadow:rgba(0,0,0,0.8) 0px -1px 0px;padding:8px
10px 9px;font-size:16px;font-weight:300}.popupInner h3
a{color:#fff}.popupInner.black_mode
h3{background-color:#595959;color:#ddd}.popupInner.warning_mode
h3{background-color:#7D1B1B;padding-top:6px;padding-bottom:6px;color:#fff}
<!-- IF not S_USER_LOGGED_IN and not S_IS_BOT -->
<form method="post" class="" action="{S_LOGIN_ACTION}">
<div id="login" class="loginDialog">
<div class="popupWrapper" style="z-index: 10001; top: 76.75px; left: 375px; position: fixed;">
<div id="sign_in_popup_inner" class="popupInner" style="width: 600px; max-height: 645px;">
<div id="inline_login_form">
<h3>Sign In</h3>
<br />
<div class="ipsForm ipsForm_horizontal">
<fieldset>
<ul>
<li class="ipsField">
<div class="ipsField_content">
Need an account? Register now!
</div>
</li>
<li class="ipsField ipsField_primary">
<span class="ipsField_title">Username</span>
<div class="ipsField_content">
<input id="username" class="input_text" name="username" type="text" size="30" tabindex="1" style="font-size: 18px;">
</div>
</li>
<li class="ipsField ipsField_primary">
<span class="ipsField_title">Password</span>
<div class="ipsField_content">
<input id="password" class="input_text" name="password" type="password" size="30" tabindex="2" style="font-size: 18px;"><br />
I've forgotten my password
Resend activation e-mail
</div>
</li>
<!-- IF S_AUTOLOGIN_ENABLED -->
<li class="ipsField ipsField_checkbox">
<input type="checkbox" checked="checked" class="radio" name="autologin" tabindex="3" />
<div class="ipsField_content">
<span class="inline_remember">
<strong>Remember me</strong><br>
<span class="desc lighter">This is not recommended for shared computers</span>
</span>
</div>
</li>
<!-- ENDIF -->
<li class="ipsField ipsField_checkbox">
<input type="checkbox" class="radio" name="viewonline" tabindex="4" />
<div class="ipsField_content">
<span class="inline_invisible">
<strong>Hide my online status this session</strong><br />
<span class="desc lighter">Don't add me to the active users list</span>
</span>
</div>
</li>
</ul>
</fieldset>
</div>
<div class="ipsForm_submit ipsForm_center" style="text-align: center;">
<input type="submit" name="login" class="ipsButton" value="{L_S_SIGN_IN}" style="outline: 0; border: 1px solid #252525;" />
</div>
</div>
</div>
<div id="sign_in_popup_close" class="popupClose clickable"><img alt="x"></div></div>
<div id="document_modal" class="modal" style="width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; z-index: 10000; opacity: 0.4; filter: alpha(opacity=40);"></div>
</div>
</form>
<!-- ENDIF -->
<a href='#login'>show modal</a>