Boot modal resolution background

Question

I want my boot modal to be open, but the page in the background is still viewable.

There are several solutions available on the Internet and stackoverflow (for example, How to make the background modal clickable ), which I tried, but I could not get it to work. I work with Firefox and IE11.

What I'm trying to achieve . On the button on the side of the page that opens the modality, make material with the contents of the model close to modal, either with the click of a button in the header , or use the button that opened the modal to use .

There is a working Bootply example where I am trying to adapt the material without much success so far.

Here's how far I got it:
Modal
(the html below is generated in javascript, I just give you the result 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 modal, without a background, but the ability to interact with the background (the background looks like active, but it is not). I get the same effect with

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

or when changing 'static'to backdropon false.

Any ideas?

Answer 1

/ .modal. , -, , div : , fade . css, , .

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

fixed , , left. , , z-index, .

Answer 2

, div