CODEWITHSUNDEEP
twitter-bootstrap
tray
tray

Reputation: 261

Modal Window Disappears Quickly

I am trying to implement 2 modal windows. The first modal window will include a contact form. When the user clicks submit, I would like the first modal window to disappear and a new modal window to appear right after.

In my situation, after the submission button is pressed, first modal disappears, second modal would briefly appear then disappear.

I made sure that I only have bootstrap-modal.js

Any help or guidance would greatly be appreciated! Thank you

First Modal

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">Contact</h3>
    </div>
    <div class="modal-body">

    <form class="form-horizontal">  
            <fieldset>  
                <div class="control-group">  
                    <label class="control-label" for="input01">Name</label>  
                    <div class="controls">  
                      <input type="text" class="input-xlarge" id="input01" name = "name">  
                    </div>  
                </div> 
                <div class="control-group"> 
                    <label class="control-label" for="input01">E-mail</label>  
                    <div class="controls">  
                      <input type="text" class="input-xlarge" id="input01">  
                    </div>  
                </div>  

              <div class="control-group">  
                <label class="control-label" for="textarea">Message</label>  
                <div class="controls">  
                  <textarea class="input-xlarge" id="textarea" rows="3"></textarea>  
                </div>  
              </div>  
            </fieldset>  
    </div>
    <div class="modal-footer">
        <button id= "form-submit" type="submit" class="btn btn-primary">Send</button>  
        <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>  
    </div>
    </form>
</div>

Second Modal

<div id="messageSentModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h3 id="myModalLabel">Success!</h3>
            <p>Your Message has been sent!</p>
            <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>  
    </div>

</div>

Javascript

<script src="index_files/jquery.js"></script>
<script src="index_files/bootstrap-transition.js"></script>
<script src="index_files/bootstrap-alert.js"></script>
<script src="index_files/bootstrap-modal.js"></script>
<script src="index_files/bootstrap-dropdown.js"></script>
<script src="index_files/bootstrap-scrollspy.js"></script>
<script src="index_files/bootstrap-tab.js"></script>
<script src="index_files/bootstrap-tooltip.js"></script>
<script src="index_files/bootstrap-popover.js"></script>
<script src="index_files/bootstrap-button.js"></script>
<script src="index_files/bootstrap-collapse.js"></script>
<script src="index_files/bootstrap-carousel.js"></script>
<script src="index_files/bootstrap-typeahead.js"></script>

Javasscript custom code


a = $(".span4").find('h3'); 
$(document).ready(function()
{
    $(".box").hide();
    a.click(function(){
        $(this).next(".box").slideToggle(600);
        $(this).removeClass("sub_heading");
    });
    a.hover(
     function () {
       $(this).addClass("sub_heading");
     }, 
     function () {
       $(this).removeClass("sub_heading");
     }
    );  
});

//submission button
$("#form-submit").click(function(){
    $("#myModal").modal('hide'); //hide first modal
    $("#messageSentModal").modal('show');   //show second modal
});

Upvotes: 0

Views: 2087

Answers (2)

Samuel R
Samuel R

Reputation: 4235

This is normal behavior and happens because you are submitting a form. You put your modal hide and show in the submit function, thus the javascript execute them and then submits the form, making the page refresh. That's why you wold only see the second modal briefly. You can see your two modals one after the other if you add "return false" at the end of your submit function.(But your form won't submit that way) The solution I see for this problem is to submit the from using AJAX, so that the page will not refresh.

Upvotes: 1

Daniel Steiner
Daniel Steiner

Reputation: 520

This seems to be a bug in the current release of Bootstrap - I have just been able to reproduce that bug, however, if you just include the modal and transition js files it "works" as it should.

you can see the "working" solution here: http://jsfiddle.net/Kyz5d/1/

Note: the code itself is unchanged expect for a "launch modal box" button - this codesection is just because jsfiddle.net links must be accompanied by code: BTW, i have tested that code usinng jQuery 1.8.2

<script src="index_files/jquery.js"></script>
<script src="index_files/bootstrap-transition.js"></script>
<script src="index_files/bootstrap-modal.js"></script>

Upvotes: 0

Related Questions