单击注册时如何在当前页面上有一个注册框?

时间:2015-10-04 09:28:09

标签: javascript html css twitter-bootstrap

我想知道如何注册'当最终用户没有帐户并希望通过点击“注册”注册时,我的索引页面中心的框(覆盖) ?在完成注册表单后,它应该保持在同一页面上。

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

我所需要的只是一些方向或一些线索,我可以自己解决这个问题。

我希望它看起来像这样: enter image description here

我的意思是..我是否给注册元素一个特定的id,使用JS和告诉页面"#"这样JS可以在同一页面上运行吗?

1 个答案:

答案 0 :(得分:1)

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

public class AuthorizationRequestResolver implements HandlerMethodArgumentResolver {

    private static Logger LOG = Logger.getLogger(AuthorizationRequestResolver.class);

    @Override
    public boolean supportsParameter(MethodParameter parameter) {
        return parameter.getParameterType().equals(AuthorizationRequest.class);
    }

    @Override
    public Object resolveArgument(MethodParameter parameter,
                                  ModelAndViewContainer mavContainer,
                                  NativeWebRequest webRequest,
                                  WebDataBinderFactory binderFactory) throws Exception {

        HttpServletRequest request = (HttpServletRequest) webRequest.getNativeRequest();

        AuthorizationRequest authRequest = mapFromServletRequest(request);
        return authRequest;

    }

    private AuthorizationRequest mapFromServletRequest(HttpServletRequest request) {
        AuthorizationRequest authorizationRequest = new AuthorizationRequest();
        authorizationRequest.setClientId(request.getParameter("client_id"));
        authorizationRequest.setRedirectUri(request.getParameter("request_uri"));
        authorizationRequest.setResponseType(request.getParameter("response_type"));
        authorizationRequest.setScope(request.getParameter("scope"));
        authorizationRequest.setState(request.getParameter("state"));
        return authorizationRequest;
    }

}
$('#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%;
}