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:
data-backdrop="false" to modal div to hide shadow of backdropkeyboard: false to prevent closing of modal by keyboard ESCCustom 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?
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:
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> and then matching </div>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.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments