如何在點擊註冊時在當前頁面上顯示註冊框？

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>