If we go to the location's list view in a browser and click on one of the locations, we will see a modal dialog similar to the following:

Let's examine how this all came together. Looking first at the listing template, the content block is populated with an unordered list. Within this .location-list, we repeat an <li> element with the item CSS class for each location, which in turn contains a link. The links have a custom attribute for the data-popup-url, and contain the location title as the link text. Following that, we have added the placeholder pop-up markup in the extrabody block, and this uses a standard modal dialog markup from Bootstrap 4. The dialog contains a header with the close button and title, plus a content area for the main pop-up details. Finally, we add the JavaScript to the js block at the very end.

In the JavaScript, we have used the jQuery framework to take advantage of several niceties it provides.  When the page is loaded, we assign an event handler on("click") for the ul.location-list element. When any .item a link is clicked, that event is delegated to this handler, which reads and stores the custom attribute as the url. When this is extracted successfully, we prevent the original click action (navigation to the full detail page) and then set up the modal for display. The new title is set for the hidden dialog box using the link's textContent, and the main HTML content is loaded into the modal dialog's .content area over Ajax. Finally, the modal is shown to the visitor using the Bootstrap4 modal() jQuery plugin. A separate event handler for clicks on the dialog's button.close reverses the process to hide the modal again.

The pop-up template simply provides a small version of the location image and a link to the full detail page. Bootstrap 4 classes are used to style the image and link.

If the JavaScript were unable to process the pop-up URL from the custom attribute, or, even worse, if the JavaScript in location_list.js failed to load or execute entirely, clicking on the location link would take the user to the detail page as usual. In this way, we have implemented our modal as a progressive enhancement so that the user experience is good, even in the face of failure.