Django 3 Web Development Cookbook - Fourth Edition

How it works...

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 ...