Bootstrap Modal immediately disappearing

Question

I\'m working on a website using bootstrap.

Basically, I wanted to use a modal in the home page, summoned by the button in the Hero Unit.

Button code:

Answer 1

Have you tried removing

data-dismiss="modal"

Answer 2

In my case, I had the CDN included in the head of application.html.erb and also installed the 'jquery-rails' gem, which I am guessing thanks to the documentation and posts above, is redundant.

I simply commented out the CDN (below) from the head of application.html.erb and the modal appropriately stays open.

<!--<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>-->

Answer 3

I too had the same issue, but for me it was happening because I had a button with type "submit" within the modal form. I changed

    <input  type='submit' name='submitname' id="partyBtn" value='Submit' title='Click to submit.'/>

to

    <input  type='button' name='submitname' id="partyBtn" value='Submit' title='Click to submit.'/>

And that fixed the disappearance issue.

Answer 4

I had added bootstrap to my project via bower, then I imported the bootstrap.min.js file and after the modal.js file. (The button that opens the modal is inside a form). I just remove the import for modal.js and it works for me.

Answer 5

Same symptom, in the context of a Rails application with Bootstrap provided by the bootstrap-sass gem, and @merv's answer put me on the right track.

My application.js file had the following:

//= require bootstrap
//= require bootstrap-sprockets

The fix was to remove one of the two lines. Indeed, the gem's readme warns you about this error. My bad.

Answer 6

I had the same issue because I was toggling my modal twice as shown below:

statusCode: {
    410: function (request, status, error) { //custom error code

        document.getElementById('modalbody').innerHTML = error;
        $('#myErrorModal').modal('toggle')
    }
},
error: function (request, error) {

    document.getElementById('modalbody').innerHTML = error;
    $('#myErrorModal').modal('toggle')
}

I removed one occurrence of:

$('#myErrorModal').modal('toggle')

and it worked like magic!