js+cssはナビゲーションバーをクリックして「ログイン」ポップアップログインボックスインタフェースを実現する

相変わらずプロジェクトのログイン問題ですが、今回はインタフェースです.
ポップアップページの効果を実現するにはbootstrapモードボックスのようなjavascriptプラグインも使用できますが、ここではjs+cssで簡単に実現できる効果を使用します.
まず、ナビゲーションバーのログインです.

ログイン

次にloginフォームインタフェースです.

×
    




   



  




      

パスワードを れましたか?




      


 しいアカウントの  




>

login-form-mask为遮罩层，原理就是使用遮罩层的css样式变化来完成弹出效果

接下来是js部分：

        //          
jQuery(document).ready(function($) {
$('.nav-login').click(function() {
$('.login-form-mask').fadeIn(100);
$('.login-form').slideDown(200);
})
$('.login-close').click(function() {
$('.login-form-mask').fadeOut(100);
$('.login-form').slideUp(200);
})
})

最後にcss:

.login-form-mask {
z-index: 9998;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
opacity: 0.4;
filter: alpha(opacity=40);
display: none
}
.login-form {
z-index: 9999;
position: fixed;
top: 40%;
left: 55%;
width: 500px;
height: 500px;
margin: -180px 0 0 -330px;
border-radius: 5px;
border: solid 2px #666;
background-color: #fff;
display: none;
box-shadow: 0 0 10px #666;
}
.login-close {
margin-right: 15px;
}

もちろん登録フォームの具体的なスタイルは自由に調整できます.