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

Had to face the same issue. The reason is same as the @merv. Issue was with a calendar component added to the page.The component itself add the modal feature to be used in the calendar popup.

So the reasons to break model popup will be one or more of the following

• Loading more than one bootstrap js versions/files (minified ...)
• Adding an external calendar to the page where bootstrap is used
• Adding custom alert or popup library to the page
• Any other library which adds popup behavior

Answer 2

My code somehow had the bootstrap.min.js included twice. I removed one of them and everything works fine now.

Answer 3

I too had the issue, if the button is inside a tag then the modal appears once and disappears soon enough, taking the button out of the form fixed the isue. Thanks I ended up in this thread! +1 to all.

Answer 4

I was facing the same problem during testing on mobile devices and this trick worked for me

<a type="submit" class="btn btn-primary" data-toggle="modal" href="#myModal">Submit</a> 

Change the button to anchor tag it should work, the problem occurs due to its type button as it is trying to submit so the modal disappears immediately.and also remove hide from modal hide fade give <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> Hope this would work for you .

Answer 5

I know this is old, but here's another thing to check for - make sure you only have one data-target= attribute. I had duplicated it and the result was as per this thread.

Answer 6

I looked for a while for a duplicate bootstrap reference in my mvc app, after the other helpful answers on this question.

Finally found it - it was included in another library I was using, so wasn't obvious at all! (datatables.net).

If you still get this problem, look for other libraries that might be including bootstrap for you. (datatables.net allows you to specify a download with or without bootstrap - others do the same).

So I removed the bootstrap.min.js from my bundle.config and all worked fine.