JQueryとHtmlでモーダルを作成するには？

Question

私はCSSとjqueryでモーダルをしようとしています。

<a class="logreg">Login</a> 
<div class="login-modal">some text here</div> 

と私のjqueryの：：

var login_modal = false; 

$(".logreg").click(function(){ 

    if (login_modal === false) { 
     $(".login-modal").fadeIn(); 
     login_modal = true; 
    } else { 
     $(".login-modal").fadeOut(); 
     login_modal = false; 
    } 

}); 

すべてがうまく機能し、これは私のhtmlです。しかし、最初はフェードインとフェードアウトを使いたくありません。私はモーダルが画面上で大きくなるようにしたい。

2番目に、私のモーダルdivを除いたページ全体が暗くなりたいです。不透明ではありません。私はそれを暗くする黒い層が欲しい。どうすればこれらをすることができますか？ここで

Answer 1

は、実施例だが、道より多くの仕事は、それを使用可能にすることがある:)

//編集：なしアニメーションが追加されないが、そのためのチュートリアルがたくさんある:)

$(".logreg").click(function(){ 
 
    $('.login-modal').addClass('visible'); 
 
    $('.black-layer').fadeIn(); 
 
}); 
 
$(".close-modal").click(function(){ 
 
    $('.login-modal').removeClass('visible'); 
 
    $('.black-layer').fadeOut(); 
 
});

.login-modal { 
 
    display: none; 
 
    z-index: 100; 
 
} 
 

 
.black-layer { 
 
    display: none; 
 
    width: 100%; 
 
    height: 100%; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    background: black; 
 
    z-index: 10; 
 
} 
 

 
.login-modal.visible { 
 
    display: block; 
 
    background: white; 
 
    z-index: 50; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translateX(-50%) translateY(-50%); 
 
    background: white; 
 
    padding: 50px; 
 
} 
 

 
.close-modal { 
 
    position: absolute; 
 
    top: 20px; 
 
    right: 20px; 
 
    cursor: pointer; 
 
    font-family: sans-serif; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a class="logreg">Login</a> 
 
<div class="black-layer"></div> 
 
<div class="login-modal"> 
 
<span class="close-modal">X</span> 
 
some text here 
 
</div>