Topic: Is there any way to use the content underneath the modal while it is showing/active?

Jordan Mack pro asked 11 months ago


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>

Michał Duszak staff answered 11 months ago


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.



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • 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
Tags