How to hide a modal and show another one using jquery?

Question

I open a modal, then on click of a div within the modal I want to close that modal and open another one. But when I do this it closes the first modal and only shows the background of the second modal with the body not displayed.

My HTML is:

<div id="test-modal" class="modal hide fade" data-keyboard="true">
    <div class="modal-body">
       <div id="option"><p>Click here to show the next modal</p></div>
    </div>
</div>

<div id="test-modal2" class="modal hide fade" data-keyboard="true">
    <div class="modal-body">
       <p>modal show after a hide doesn't work?</p>
    </div>
</div> 

and my jquery is:

$('.option').click(function() {
    $('#test-modal').modal('hide');
    $('#test-modal2').modal('show');

});

Answer 1

This can help:

1. Remove hide class from modals divs
2. You use .option in your selector, but in html you use id="option" , so change them

Working version

Answer 2

请尝试在关闭按钮上使用此data-dismiss属性。

 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>

Answer 3

My Stupid mistake the jquery works. I accidently didnt close off the first modal properly which is why the animation wouldnt finish and cause the second modal to not load. I simply put the secondary modal on top of the first modal to test and it worked.