1

我找到了这个 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>
4

0 回答 0