Modal greyed out when screen width over 1400px

Front End Components
1

image
image1461×671 5.25 KB

Not sure how to fix this, looked online and in forms but couldn’t find anything similar.

I’ve tried deleted and new modals but every time I test it with the display width over 1400px it becomes greyed out and unusable.

<div class="modal" id="modal1" is="dmx-bs5-modal" tabindex="-1">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title">Modal title</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
            <p>Modal body text goes here.</p>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
        </div>
    </div>
</div>
2

From what you copied you are missing a closing div tag but i’m going to assume this is just how you copied and pasted it and that the tag is actually there in your actual page.

How do you trigger this modal?

Looks like for some reason the modal has a z-index less than that of the backdrop do you have any custom css maybe that conflicts?

One way to fix this is just adding a higher z-index but it could just be how you trigger the modal causing It to happen but ill drop the z-index fix here incase needed:

Changing
<div class="modal" id="modal1" is="dmx-bs5-modal" tabindex="-1">

To
<div class="modal" id="modal1" is="dmx-bs5-modal" tabindex="-1" style="z-index: 10000 !important;">

Should get it back infront

3

Yes, I missed the div on the copy, nice catch. Sadly the change in style did not solve it.

Modal is triggered by a button, I haven’t changed any of the modal CSS, I went in to double check in the CSS file and there is nothing with “modal”.

image

<button id="btn1" class="btn btn-primary text-light style87" type="submit" data-bs-target="#modal1" style="font-weight: 600" data-bs-toggle="modal"><i class="fas fa-plus-circle style103"></i>
            New Document</button>

It’s so weird, when I make the browser width less than 1400px everything is fine but when it exceeds it the modal becomes greyed out.

4

This is what it looks like if you try to have two modals opened at once. Modals are designed to be opened one at a time, so if you are opening a modal from inside another modal, you’ll want to close the original.

5

Only one modal on page.

image
image383×526 9.55 KB

6

Try moving the modal right before the closing body tag. If this is on a content page then move it to the layout page.

1 Like
7

I tried moving modal to bottom of body, that didn’t work. How do I trigger a modal on the layout page from a button on the content page?

8

Add this to the button that opens the modal:

data-bs-toggle="modal" data-bs-target="#your_modal_id"
1 Like
9

THANK YOU!!! That fixed it!

2 Likes
10

Glad it worked. It’s a bootstrap limitation.

11

Interesting the above code works on a content page for me the only issues I seem to have is if I was to keep a backdrop open and then internally switch to another content page the backdrops stays open but either way glad this has worked :partying_face:

1 Like
12

Do you know how I would go about displaying a value from an input on the page in the modal now that it lives on the layout page?