模态显示在IE中

时间：2014-12-03 11:01:11

标签： html css internet-explorer browser modal-dialog

我有这个代码用于显示一个带有注册表单的模态，当点击＆＃34;登录＆＃34;按钮（用于phpBB3）。一切都很棒，但在IE中，模式出现在页面加载我的点击...如何解决这个问题？

＆＃13;
＆＃13; 
/***************
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}
＆＃13; 
<!-- 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? <a href="ucp.php?&mode=register" title="Register now!">Register now!</a>
								</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 />
									<a href="ucp.php?mode=sendpassword" title="Retrieve password">I've forgotten my password</a>&nbsp;
                                    <a href="ucp.php?mode=resend_act" title="Resend e-mail">Resend activation e-mail</a>
								</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"><a href="#close"><img src="{T_THEME_PATH}/ir_red/close_popup.png" alt="x"></a></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 -->
＆＃13;
＆＃13;
＆＃13;

IE ScreenShot

所以..这个显示正确但是在页面加载（索引）时，模态直接出现而没有我点击登录。

1 个答案:

答案 0 :(得分：0)

在IE不透明度中：0显示内部子元素，因此在 loginDialog 类中以及 loginDialog：target 中添加可见性属性这样：

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

<强>加成 您应该声明以下元标记：

<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? <a href="ucp.php?&mode=register" title="Register now!">Register now!</a>
								</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 />
									<a href="ucp.php?mode=sendpassword" title="Retrieve password">I've forgotten my password</a>&nbsp;
                                    <a href="ucp.php?mode=resend_act" title="Resend e-mail">Resend activation e-mail</a>
								</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"><a href="#close"><img alt="x"></a></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>

相关问题
最新问题