Topic: Is there any way to use the content underneath the modal while it is showing/active?
Expected behavior
Able to interact with on other elements on the DOM while a modal is shown/active
Actual behavior
Unable to click select boxes and other elements
Resources (screenshots, code snippets etc.)
<!-- Modal -->
<div id="budgetRemaining" class="modal right fade mt-5" tabindex="-1" aria-labelledby="budgetRemainingModalLabel"
aria-hidden="false" data-mdb-backdrop="false" data-mdb-keyboard="true">
<div class="modal-dialog modal-side modal-top-right ">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="budgetRemainingModalLabel">Remaining Budget</h5>
<a type="button" class="" data-mdb-dismiss="modal" aria-label="Close"><i class="fa fa-chevron-right"></i></a>
</div>
<div class="modal-body">
<div class="row">
<div class="col">
<table class="table table-sm table-bordered">
<tr>
<td>Planned Amount</td>
<td class="text-end"><span class="text-end" id="planned"></span></td>
</tr>
<tr>
<td>Calculated Amount</td>
<td class="text-end"><span class="text-end" id="calculated"></span></td>
</tr>
<tr>
<td>Unassigned Budget</td>
<td class="text-end"><span class="text-end" id="pool"></span></td>
</tr>
</table>
</div>
</div>
<div class="row">
<div class="col">
<table>
<tr>
<td>
<h6>Customer:</h6>
</td>
<td class="float-end">
<h6><b id="customerName"></b></h6>
</td>
</tr>
<tr>
<td>
<h6>Purchase Order Currency:</h6>
</td>
<td class="float-end">
<h6><b id="purchaseOrderCurrency"></b></h6>
</td>
</tr>
<tr>
<td>
<h6>Discount:</h6>
</td>
<td class="float-end">
<h6><b id="customerDiscount"></b></h6>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
Dear Jordan,
As I can see modal's element covers all the content on the page. making modal the only approachable element in the DOM while it's shown. I tried to modify this behaviour, and done things present in this snippet:
https://mdbootstrap.com/snippets/standard/m-duszak/3506582#js-tab-view
Idea is that we are setting the max-width and max-height of our .modal to the size of our actual modal container - thanks to this, we are allowed to click anywhere behind it - since nothing covers the content. Next step is positioning - as dimensions changed, we have to defined position once again. Setting left: calc(100vw - 600px); was quite enough in my opinion. Then I unlock the scrollbar with overflow: visible;. The body CSS which I modify will prevent modal's behaviour and will let us scroll through the content. Now you can open your modal and fill forms behind it as much as you want.
But be careful, as this approach changes a lot! Because body is affected globally, and responsiveness of a modal may work a bit different.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: No
- Technology: MDB Standard
- MDB Version: MDB5 3.10.0
- Device: Intel x86
- Browser: Chrome
- OS: Ubuntu 20.04
- Provided sample code: No
- Provided link: No