Bootstrap modal enable background

Question

I want my bootstrap modal be open but the page in the background still to be clickable.

There are a few solutions available on the web and stackoverflow (like How do I make the background of a modal clickable) which I tried but I could not get it to work. I'm working with Firefox and IE11.

What I try to achieve: Have a button at the side of the page that opens the modal, do stuff with model content, close modal either with click on button in header or with click on button that opened the modal.

There is a working Bootply example where I try to adapt stuff from, without much success so far.

This is how far I've got:
Modal
(the html below gets generated in javascript, I just give you the output for better readability)

 <div id="bootstrapModal" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                     <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-success " id="submitButton">Submit</button>
                    <button type="button" class="btn btn-danger" data-dismiss="modal" >Cancel</button>
                </div>
            </div>
        </div>
    </div>

Javascript

var modal = $('#bootstrapModal');
$('.modal-backdrop', modal).css('display', 'none');
$('.modal-dialog',modal).css('pointer-events', 'none');
$('.modal-content',modal).css('pointer-events', 'all',);

$(modal).modal('show');

What I get is a modal with no backdrop but the possibility to interact with the background (background looks like it's active, but it's not). I get the same effect with

$(modal).modal({backdrop: 'static', keyboard: false});

or when replacing 'static' in backdrop with false.

Any ideas?

Answer 1

You have to change/override the .modal class. When your window is open, if you inspect the background with your web inspector, you will see everything is contained in a div with the classes: modal, fade and in. The "modal" class has the following css properties, which sets it to cover the whole screen, making your site unclickable.

.modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    display: none;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    outline: 0;
}

You would have to remove the fixed property or modify the top,right,bottom and left properties. However, if you removed the fixed property, you will not be able to use the z-index property, which gives your pop-up the overlay effect.