IE中的jQuery模态搞笑
我获得了这个jQuery模式登录，它在chrome和FF中工作得很好-它在IE的演示页面上工作，但当我实现它时-即使是在超级基本的形式下，它也不工作 模式掩码可以工作，但是登录表单呈现在掩码后面的左上角，没有居中…更不用说表单甚至没有呈现 当我试图用jsfiddle来表达它时，我觉得很奇怪IE中的jQuery模态搞笑,jquery,Jquery,我获得了这个jQuery模式登录，它在chrome和FF中工作得很好-它在IE的演示页面上工作，但当我实现它时-即使是在超级基本的形式下，它也不工作 模式掩码可以工作，但是登录表单呈现在掩码后面的左上角，没有居中…更不用说表单甚至没有呈现 当我试图用jsfiddle来表达它时，我觉得很奇怪 http://jsfiddle.net/n2bFt/8/ 即使在IE中，它也能工作（让我觉得JSFIDLE在该窗口中使用webkit渲染引擎） 但是，如果你在IE9中直接运行页面，它会出现错误 有什么想法吗
http://jsfiddle.net/n2bFt/8/
<html>
<head>
<style>
#mask { display: none; position: absolute; left: 0; top: 0; z-index: 999; width: 100%; height: 100%; background:#7d949a; opacity: 0.8; filter:alpha( opacity=80 ); }
.login-popup{ display:none; position: fixed; top: 50%; left: 50%; z-index: 9999; float: left; background: #333; padding: 10px; border: 2px solid #ddd; font-size: 1.2em; box-shadow: 0px 0px 20px #999; -moz-box-shadow: 0px 0px 20px #999; /* Firefox */ -webkit-box-shadow: 0px 0px 20px #999; /* Safari, Chrome */ border-radius:3px 3px 3px 3px; -moz-border-radius: 3px; /* Firefox */ -webkit-border-radius: 3px; /* Safari, Chrome */ }
img.btn_close { float: right; margin: -28px -28px 0 0; }
fieldset { border:none; }
form.signin .textbox label { display:block; padding-bottom:7px; }
form.signin .textbox span { display:block; }
form.signin p, form.signin span { color:#999; font-size:11px; line-height:18px; }
form.signin .textbox input { width:200px; font:13px Arial, Helvetica, sans-serif; padding:6px 6px 4px; background:#666666; border-bottom:1px solid #333; border-left:1px solid #000; border-right:1px solid #333; border-top:1px solid #000; color:#fff;
border-radius: 3px 3px 3px 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; }
form.signin input:-moz-placeholder { color:#bbb; text-shadow:0 0 2px #000; }
form.signin input::-webkit-input-placeholder { color:#bbb; text-shadow:0 0 2px #000; }
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script>
$( document ).ready( function() {
$( 'a.login-window' ).click( function() {
// Getting the variable's value from a link
var loginBox = $( this ).attr( 'href' );
//Fade in the Popup and add close button
$( loginBox ).fadeIn( 300 );
//Set the center alignment padding + border
var popMargTop = ( $( loginBox ).height() + 24 ) / 2;
var popMargLeft = ( $( loginBox ).width() + 24 ) / 2;
$( loginBox ).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});
// Add the mask to body
$( 'body' ).append( '<div id="mask"></div>' );
$( '#mask' ).fadeIn( 300 );
return false;
});
// When clicking on the button close or the mask layer the popup closed
$( 'a.close, #mask' ).on( 'click', function() {
$( '#mask, .login-popup' ).fadeOut( 300 , function() {
$( '#mask' ).remove();
});
return false;
});
});
</script>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" >
<div id="login-box" class="login-popup">
<a href="#" class="close"><img src="images/close_pop.png" class="btn_close" title="Close Window" alt="Close" /></a>
<form method="post" class="signin" action="#">
<fieldset class="textbox">
<label class="username"><span>Email</span>
<input id="username" name="username" value="" type="text" autocomplete="on" placeholder="Username">
</label>
<label class="password"><span>Password</span>
<input id="password" name="password" value="" type="password" placeholder="Password">
</label>
<button class="submit button" type="button">Sign in</button>
<p><a class="forgot" href="#">Forgot your password?</a></p>
</fieldset>
</form>
</div>
<span style="font-size: 8pt; color: #707070;" ><a href="#login-box" class="login-window">Client Login</a>© 2012-</span>
</body>
</html>
#遮罩{显示：无；位置：绝对；左侧：0；顶部：0；z索引：999；宽度：100%；高度：100%；背景：#7d949a；不透明度：0.8；过滤器：alpha（不透明度=80）；}
.登录弹出窗口{显示：无；位置：固定；顶部：50%；左侧：50%；z索引：9999；浮动：左侧；背景：333；填充：10px；边框：2px实心#ddd；字体大小：1.2em；方框阴影：0px 0px 20px#999；-moz方框阴影：0px 0px 20px#999；/*Firefox*/-webkit方框阴影：0px 0px 20px#999/-Safari，Chrome*/边框：3px半径：3px；*s:3px；/*Firefox*/-webkit边框半径：3px；/*Safari，Chrome*/}
img.btn_close{float:右；边距：-28px-28px 0；}
字段集{border:none；}
form.signin.textbox标签{显示：块；填充底部：7px；}
form.signin.textbox span{display:block；}
form.signin p，form.signin span{color:#999；字体大小：11px；行高：18px；}
form.signin.textbox输入{宽度：200px；字体：13px Arial，Helvetica，无衬线；填充：6px 6px 4px；背景：666666；边框底部：1px实心#333；边框左侧：1px实心#000；边框右侧：1px实心#333；边框顶部：1px实心#000；颜色：fff；
边框半径：3px 3px 3px；-moz边框半径：3px；-webkit边框半径：3px；}
form.sign输入：-moz占位符{color:#bbb；文本阴影：0 0 2px#000；}
form.signin输入：：-webkit输入占位符{color:#bbb；文本阴影：0 0 2px#000；}
$（文档）.ready（函数（）{
$（'a.login-window'）。单击（函数（）{
//从链接获取变量的值
var loginBox=$（this.attr（'href'）；
//淡入弹出窗口并添加关闭按钮
$（登录框）.fadeIn（300）；
//设置中心对齐填充+边框
var popMargTop=（$（loginBox）.height（）+24）/2；
var popMargLeft=（$（loginBox）.width（）+24）/2；
$（登录框）.css（{
“页边距顶部”：-popMargTop，
“左边距”：-popMargLeft
});
//将遮罩添加到主体
$（“正文”）。附加（“”）；
$（'面具'）.fadeIn（300）；
返回false；
});
//单击“关闭”按钮或遮罩层时，弹出窗口关闭
$（'a.close，#mask'）。在（'click'，function（）{
$（'#掩码，.login popup'）.fadeOut（300，函数（）{
$（“#掩码”）.remove（）；
});
返回false；
});
});
电子邮件
密码
登录
&复印件；2012年-