Custom code to open a page in Softr modal with custom button

Custom Coding
1

Add this code to your page settings->Custom code → Footer section in the page where you have your custom button with the corresponding selector, for example id=“myButton”, replace the SIZE with “sm”, “md”, “lg” or “xl”, replace YOUR-PAGE-URL with the page URL that you want to open in modal save and preview

<script>
document.querySelector('#myButton').addEventListener('click', ()=>{
    window.openSwModal('YOUR-PAGE-URL', 'lg');
})
</script>
2 Likes
2

Hehe :face_with_monocle::grin::grin:

A bit of clarification for this useful code:

Let’s say you harcoded a button and let’s say you want clicking on this button to open a modal to display a specific page of your app => with this code you won’t have to hardcode a modal or to use a modal/drawer of a web component library like Shoelace. You just use what Softr already built.

Note that the code can’t work to open a lateral modal (too complex to perform this).

1 Like
3

Thanks for this!

I have a custom html <a href id="openModalLink"> link on my page that I wanted to be able to trigger a modal. I modified this code to account for issues the addEventListener was having finding the link in the DOM, due to load times.

<script>
function waitForElement(selector, callback, timeout = 5000) {
    const intervalTime = 100; // milliseconds between checks
    const startTime = new Date().getTime();

    const intervalId = setInterval(function() {
        const element = document.querySelector(selector);
        if (element) {
            clearInterval(intervalId);
            callback(element);
        } else if (new Date().getTime() - startTime > timeout) {
            clearInterval(intervalId);
            console.error('Timeout waiting for element:', selector);
        }
    }, intervalTime);
}

waitForElement('#openModalLink', function(modalLink) {
    modalLink.addEventListener('click', () => {
        window.openSwModal('YOUR-PAGE-URL', 'lg');
    });
});
</script>