Question

我抓住了这个jQuery模式登录http://www.alessioatzeni.com/blog/login-box-modal-dialog-window-with-css-and-jquery/并且它在chrome和FF中运行得很好 - 它在演示页面上的IE中工作，但是当我实现它时 - 即使是超级基本形式，它也不会工作...

模态蒙版可以正常工作，但登录表单会在蒙版后面和左上角渲染，而不是居中...更不用说表格甚至不会渲染...

当我试图传达它时，对我来说很奇怪 - 在jsfiddle中

http://jsfiddle.net/n2bFt/8/

即使在IE中也可以使用（让我觉得jsfiddle使用该窗口的webkit渲染引擎）

但是，如果你在IE9中直接运行页面 - 它就会出现...

任何想法......请...

<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>&copy; 2012-</span>

</body>
</html>

IE中的jQuery模态funnieness

0 个答案: