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

Question

我想知道当最终用户没有帐户并想通过单击“注册”进行注册时，如何在我的索引页面中央获得一个“注册”框(覆盖)？完成注册表单后，它应该停留在同一页面上。

我想我知道后一个怎么做，但我完全不知道第一个。

我只需要一些方向或一些线索，有了它，我就可以自己想办法了。

我希望它看起来像这样:

我的意思是..我是否为注册元素提供了一个特定的 ID，将其与 JS 一起使用并告诉页面“#”以便 JS 可以在同一页面上运行？

Answer 1

这就是您要找的。如果单击该按钮，您将获得一个带有覆盖层的弹出窗体。而且，如果您单击叠加层，它将隐藏。我已经为你完成了大部分工作!现在你只需要完成它! :)

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

$('#sign-up-popup').click(function(){
	$(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>