如何在点击注册时在当前页面上显示注册框？

Question

我想知道在最终用户没有帐户并想通过点击“注册”注册时，如何在索引页的中心获得“注册”框（覆盖）？完成注册表单后，它应该保持在同一页面上。

我想我知道如何做后者，但第一个我不完全知道。

我只需要一些方向或一些线索，我可以自己弄清楚。

我希望它看起来就像是这样的：

我的意思..我给的注册元素的特定ID，使用了JS告诉页面以“＃”这样一个JS可以在同一页面上运行？

Answer 1

这是你在找什么。如果你点击按钮，你会得到一个覆盖的弹出窗体。而且，如果你点击叠加层，它会隐藏。我已经完成了大部分工作！现在你只需要完成它！ :)

$('#sign-up').click(function(){ 
 
\t var target = $(this).attr('href'); 
 
    $(target).fadeToggle('fast'); 
 
}); 
 

 
$('#sign-up-popup').click(function(){ 
 
\t $(this).fadeOut('fast'); 
 
});

.sign-up{ 
 
    border:1px solid black; 
 
    padding: 10px 40px; 
 
    margin-top: 10px; 
 
    display:inline-block; 
 
} 
 

 
.popup-overlay{ 
 
    display:none; 
 
    position:absolute; 
 
    top:0; 
 
    left:0; 
 
    height:100%; 
 
    width:100%; 
 
    background-color: rgba(0,0,0, 0.5); 
 
} 
 

 
.sign-up-form-container{ 
 
    background-color: #fff; 
 
    width: 300px; 
 
    padding: 40px; 
 
    margin: 0 auto; 
 
    position:relative; 
 
    top: 50%; 
 
    -moz-transform: translatey(-50%); 
 
    -ms-transform: translatey(-50%); 
 
    -o-transform: translatey(-50%); 
 
    -webkit-transform: translatey(-50%); 
 
    transform: translatey(-50%); 
 
} 
 

 
.sign-up-form-container input[type='text']{ 
 
    display:block; 
 
    box-sizing:border-box; 
 
    width: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a id="sign-up" class="sign-up" href="#sign-up-popup">Sign Up (Click me for popup!)</a> 
 

 
<div id="sign-up-popup" class="popup-overlay"> 
 
    <div class="sign-up-form-container"> 
 
    <form> 
 
     <h1>Sign Up</h1> 
 
     <hr/> 
 
     <br/> 
 
     <input type="text" /> 
 
     <br/> 
 
     <input type="text" /> 
 
     <br/> 
 
     <input type="button" value="Sign Up" /> 
 
    </form> 
 
    
 
</div> 
 
    
 
</div>