Jquery Bootstrap Modal ...如何从另一个模态对话框中打开另一个模态对话框

Question

I have a modal dialog that opens with a form inside for users to sign in. If the user has not registered yet, there is a link in that modal dialog to open up another modal dialog with a registration form inside. Problem is that is causing conflict and looks weird. I guess i need to close the login form modal dialog before i open the registration modal dialog.

// the button to open the login modal dialog
<button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#login-dialog">
        Login
      </button>

//this button is inside the login modal dialog, a will open the registration modal dialog
'<button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#registration-dialog">
        Register
      </button>

Answer 1

You can open/close the dialog as needed even from within another dialog. Using this style:

div.modal {
    display:none;
}

With this html:

<button id="login">Login</button>
<div id="login_modal" class="modal">this is your login modal.
    <br/>
    <br/>
    <button id="register">Register</button>
</div>
<div id="register_modal" class="modal">this is your register modal.</div>

You can do this in javascript:

$("#login").click(function () {
    $("#login_modal").dialog({
        modal: true
    });
});

$("#register").click(function () {
    $("#register_modal").dialog({
        modal: true
    });
    $("#login_modal").dialog("close");
});

Here's a fiddle .