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. The URL path named location_detail_modal points to the same location detail view, but uses a different template. The mentioned template just has a responsive image and a modal dialog footer with the link Learn more… leading to the normal detail page of the location. In the list view, we changed the link of a list item to include data-modal-title and data-modal-url attributes that will later be referred to by JavaScript. The first attribute stipulates that the full address should be used as the title. The second attribute stipulates the location from which the HTML for the body of the modal dialog should be taken. At the end of the list view, we have the markup for the Bootstrap 4 modal dialog. The dialog contains a header with the Close button and title, plus a content area for the main details. JavaScript should have been added via the js block.
In the JavaScript file, we used the jQuery framework to take advantage of shorter syntax and unified cross-browser functionality. When the page is loaded, we assign an event handler on('click') for the .item-list element. When any a.item is clicked, that event is delegated to this handler, which reads and stores the custom data attributes as the url and title. When these are extracted successfully, we prevent the original click action (navigation to the full detail page) and then set up the modal for display. We set the new title for the hidden dialog box and load the modal dialog's content to the .modal-body element over Ajax. Finally, the modal is shown to the visitor using the Bootstrap 4 modal() jQuery plugin.
If the JavaScript file were unable to process the URL of the modal dialog from the custom attribute, or, even worse, if the JavaScript in list.js failed to load or execute entirely, clicking on the location link would take the user to the detail page as usual. We have implemented our modal as a progressive enhancement so that the user experience is right, even in the face of failure.