Access Modal from Layout Page in Content Page

Front End Components Bugs
#1

I added a modal to a layout page. When I want to trigger the modal with a button from a content page then it isn‘t selectable under the toggle UI. Are modals supposed to be selectable in a content page?

I can work around that by triggering the modal in code view but it would be nice if I could select modals from the layout page via UI in the content page.

#2

Yes, modals on the layout pages are accessible in the content pages.

Try this code to open a modal on the layout page in a content page.

Add a Dynamic Click event, click on the action picker of the Click event. Select the modal to show on the click event (all the modals on layout page will appear in the list) and add modal -> show action. After selecting this action, the code will look like this: dmx-on:click="modalName.show()"

#3

Thanks @guptast

That doesn’t work either. The modal doesn’t show up under dynamic click events on the content page.

#4

The content page could be linked to a different layout page. Check under Page Properties of the content page whether this page is linked to the layout page containing modal.

#5

Thanks, I’ve checked that already. It’s linked in the UI for the page properties and in the content page site code as well.

#6

In the dynamic event Actions Picker, does the modal appear if you search by the modal ID?

You could also try adding dynamic click event for the button in the Code view directly - dmx-on:click="modalName.show()" and check whether this is opening the modal in the browser mode. Replace modalName with ID of the modal on the layout page

#7

Using this dropdown on a button I don’t find modals in the layout page:

Screenshot 2022-11-01 at 02.49.52
Screenshot 2022-11-01 at 02.49.52720×166 7.23 KB

However I do see them when using dynamic click events if you aren’t seeing them in the click events bindings a possible issue is the is="dmx-bs5-modal" is missing or maybe its referencing bs4 if you upgraded bootstrap version mid project. This is just one thing that could be preventing it showing in the dynamic click events UI.

<div class="modal" id="modal1" is="dmx-bs5-modal" tabindex="-1">
        <div class="modal-dialog" 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>
    </div>
#8

@Sorry_Duh Thank you! is="dmx-bs5-modal" was missing. I added it, and now I can select the modal under dynamic click events. It’s still not visible under the Action Toggle options.

I’m going to use code view instead, though because I’m trying to avoid click events when not needed: data-bs-toggle="modal" data-bs-target="#modal_id"> works.

1 Like