Is there any way to use the content underneath the modal whi

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

Jordan Mack pro asked 2 years 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>

Add comment

Michał Duszak staff answered 2 years ago

1 0 Best answer

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:

<a href="https://mdbootstrap.com/snippets/standard/m-duszak/3506582#js-tab-view" target="_blank">https://mdbootstrap.com/snippets/standard/m-duszak/3506582#js-tab-view</a>

Idea is that we are setting the <code>max-width</code> and <code>max-height</code> of our <code>.modal</code> 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 <code>left: calc(100vw - 600px);</code> was quite enough in my opinion. Then I unlock the scrollbar with <code>overflow: visible;</code>. The <code>body</code> 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 <code>body</code> is affected globally, and responsiveness of a modal may work a bit different.

Please insert min. 20 characters.

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.

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

ForumUser: 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

Jordan Mack

Pro User 45Support score
12Questions 1Answers 4Snippets