Bootstrap 4 how to make modal that doesn't block or affect background and scrolling

Question

I'm trying to create Bootstrap modal that will be shown while still allowing user to interact with rest of the website. The steps I've done so far are:

Added data-backdrop="false" to modal div to hide shadow of backdrop
Added keyboard: false to prevent closing of modal by keyboard ESC

Custom CSS class to make dialog show in bottom right corner:

.modalDialog {
    position: fixed;
    bottom: 20px;
    right: 20px;
    margin: 0px;
}

This changes make model appear non-blocking... but there is still problem with page not being scrollable and elements not being clickable. I've tried most of the answers here on StackOverflow but all of them are outdated (for version of Bootstrap before 4).

So, is there a way to do this in Bootstrap 4 that is framework supported, or you are forced to go with custom CSS classes?

If the user can still interact with the rest of the site, it's not really a modal. — Blazemonger, Jan 16 '18 at 17:13

Michael W. Czechowski · Answer 1 · 2018-09-24T08:19:12.857

4

Just to the following steps to help yourself:

1: Bootstrap 4 adds a .modal-open to the body tag:

.modal-open {
    overflow: hidden;
}

Override or add custom CSS like that:

.modal-open {
    overflow: auto !important; // you will need important here to override
}

2: Bootstrap 4 also adds a new div tag to the end of your body.

Just remove it and add this to your custom CSS:

.modal-backdrop {
    display: none !important;
}

You will still be able to hide the modal by clicking on the hidden backdrop. Tell me, if that helped you.

edited Sep 24 '18 at 08:19

answered Jan 16 '18 at 16:42

Michael W. Czechowski

3,366
2
23
50

This is nice! Any idea how to make this work for one particular modal and not all modals on the page? – binoculars Aug 07 '19 at 11:26

score 0 · Accepted Answer · answered Jan 16 '18 at 16:53

I've resolved this by removing reliance on Bootstrap for opening modal and went with custom CSS. If we look at Bootstrap Modal example as starting point you would need to do:

Remove root container div... in example that's <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> and then matching </div>
Add id="modalDialog" to body, resulting in <div id="modalDialog" class="modal-dialog">

Target that with custom CSS I've left previously:

.modalDialog {
    position: fixed;
    bottom: 20px;
    right: 20px;
    margin: 0px;
}

Use something like Animate.Css to provide intro for modal open. To emulate what Bootstrap does you can use fadeInDown, resulting in: <div id="modalDialog" class="modal-dialog animated fadeInDown">
If you want close animation just create custom JavaScript function that you invoke with button click. Example close function: $("#modalDialog").addClass('animated fadeOutDown');

Of course you now won't need Bootstrap modal() call. Hope it solves you the problem... I'll see if I can create JsFiddle for better demo.

Bootstrap 4 how to make modal that doesn't block or affect background and scrolling

2 Answers2