Change SimpleModal content with a call inside current modal content

Question

<script type="text/javascript">
jQuery(function ($) {
    $('#login-modal').click(function (e) {
        $('#login-content').modal();
        return false;
    });

    $('#doRegister').click(function (e) {
        $('#register-modal').modal();
        return false;
    });
});
<script>

<a id="login-modal">Login</a>  

<div id="login-content" style="display:none;">
    Not registered? <a id="doRegister" href="#">Register now</a>!
</div>

<div id="register-content" style="display:none;">
    Hi, I'm register.
</div>

When I click on Login button, it opens the modal with no problems.

The problem is, when I click register link inside the modal (login modal), login modal has to be closed and register modal has to be opened.

SimpleModal documentation is here but I couldn't do it myself. http://www.ericmmartin.com/projects/simplemodal/

Could you help me?

Ps. It would be perfect if the modal doesn't close and re-open itself. I believe replacing the content inside the currently opened modal would be the best solution for an user friendly look.

Answer 1

Fixed with:

jQuery(function ($) {
$('#login-modal').click(function (e) {
    $('#login-content').modal({ opacity:80 });
    return false;
});

$('#doRegister').click(function (e) {
    $.modal.close();
    $('#register-content').modal({ opacity:80, minHeight:700});
    return false;
});
});