Bootstrap Modal Only Showing Backdrop

Bootstrap modal is not showing but the backdrop appears

Finally solved it! Seems like the multiple parallel calls are causing it. I placed the code to a function that was called multiple times during a single page load so if the condition was met, it will call the modal multiple times.

I placed the code to another function that is only called once per page load and now it`s working.

Bootstrap Modal Backdrop only shows with "class=fade", not class="show"

You can give the model an id and start it modal like this:

$( document ).ready(function() {
    $('#my-modal').modal('show')
})

This will keep the behavior that occurs when you trigger it manually using a button.

Bootstrap Modal only triggering Backdrop

have you tried to change the id unto more valid id name? e.g. "#mymodal". Perhaps you may try to see this valid ID names

Bootstrap Modal only displays backdrop

This is because you are using jQuery version 3.0.0-alpha which isn't yet supported by Bootstrap

In this fiddle I've used your code and jQuery version 2.1.4 where your modal works as it should.

In this fiddle I've used your exact code with jQuery version 3.0.0-alpha where it doesn't work

Solution:

Change your jQuery version from:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>

To:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

Hope this helps!

Bootstrap modal appearing under background

If the modal container has a fixed or relative position or is within an element with fixed or relative position this behavior will occur.

Make sure the modal container and all of its parent elements are positioned the default way to fix the problem.

Here are a couple ways to do this:

1. Easiest way is to just move the modal div so it is outside any elements with special positioning. One good place might be just before the closing body tag </body>.
2. Alternatively, you can remove position: CSS properties from the modal and its ancestors until the problem goes away. This might change how the page looks and functions, however.

Bootstrap Modal Backdrop Remaining

Just in case anybody else runs into a similar issue: I found taking the class "fade" off of the modal will prevent this backdrop from sticking to the screen even after the modal is hidden. It appears to be a bug in the bootstrap.js for modals.

Another (while keeping the fade effects) would be to replace the call to jQueryElement.modal with your own custom javascript that adds the "in" class, sets display: block, and add a backdrop when showing, then to perform the opposite operations when you want to hide the modal.

Simply removing fade was sufficient for my project.

Twitter bootstrap modal-backdrop doesn't disappear

Make sure you're not replacing the container containing the actual modal window when you're doing the AJAX request, because Bootstrap will not be able to find a reference to it when you try to close it. In your Ajax complete handler remove the modal and then replace the data.

If that doesn't work you can always force it to go away by doing the following:

$('#your-modal-id').modal('hide');
$('body').removeClass('modal-open');
$('.modal-backdrop').remove();

---

Related Topics