How to create dynamic modals/popups in template

You’ve got at least three different ways to approach this (not counting some minor variations).

  • Create a view that returns the html fragment that you want displayed in your pop-up. Clicking on something that is supposed to activate the pop-up does a GET to that view to retrieve the HTML, and then injects it into the appropriate div.

  • When the page is rendered, create the HTML for each selection and put those fragments within hidden divs on the page. In this case, the JS copies that hidden div into the modal for being displayed.

  • Render a complete pop-up for each selection, and have the button (or whatever) be associated with the pop-up it’s supposed to display.

1 Like