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입니다. 하지만 먼저 페이드 인을 사용하거나 페이드 아웃하고 싶지 않습니다. 나는 모달을 화면 위에 올리고 싶을뿐입니다.

둘째, 모달 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>

에 대한이