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

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>

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