CODEWITHSUNDEEP
csstwitter-bootstrapbootstrap-4
nikib3ro
nikib3ro

Reputation: 20596

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

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:

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

  3. 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?

Upvotes: 4

Views: 5046

Answers (2)

Michael W. Czechowski
Michael W. Czechowski

Reputation: 3457

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.

Upvotes: 4

nikib3ro
nikib3ro

Reputation: 20596

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:

  1. 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>
  2. Add id="modalDialog" to body, resulting in <div id="modalDialog" class="modal-dialog">

  3. Target that with custom CSS I've left previously:

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

  4. 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">

  5. 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.

Upvotes: 0

Related Questions