Execute these steps one by one:

1. Create a template for the location's list view with a hidden, empty modal dialog at the end. Each listed location will have custom HTML5 data attributes dealing with the pop-up information, as follows:

{# templates/locations/location_list.html #}
{% extends "base.html" %}
{% load i18n static %}

{% block content %}
    <h2>{% trans "Locations" %}</h2>
    <ul class="location-list">
        {% for location in location_list %}
        <li class="item">
            <a href="{% url "location-detail"
                            slug=location.slug %}"
               data-popup-url="{% url "location-popup"
                                      slug=location.slug %}">
                {{ location.title }}</a>
        </li>
        {% endfor %}
    </ul>
{% endblock %}

{% block extrabody %}
<div id="popup" class="modal fade" tabindex="-1" role="dialog"
     aria-hidden="true" aria-labelledby="popup-modal-title">
    <div class="modal-dialog modal-dialog-centered"
         role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 id="popup-modal-title"
                    class="modal-title"></h4>
                <button type="button" class="close"
                        data-dismiss="modal"
                        aria-label="{% trans 'Close' %}">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body"></div>
        </div>
    </div>
</div>
{% endblock %}

{% block js %}
<script src="{% static 'site/js/location_list.js' %}"></script>
{% endblock %}

2. We need JavaScript to handle the opening of the dialog and loading the content dynamically:

// site_static/site/js/location_list.js
jQuery(function($) {
    var $list = $(".location-list");
    var $popup = $("#popup");

    $popup.on("click", ".close", function(event) {
        $popup.modal("hide");
        // do something when dialog is closed
    });

    $list.on("click", ".item a", function(event) {
        var link = this;
        var url = link.getAttribute("data-popup-url");

        if (url) {
            event.preventDefault();

            $(".modal-title", $popup).text(link.textContent);
            $(".modal-body", $popup).load(url, function() {
                $popup.on("shown.bs.modal", function () {
                    // do something when dialog is shown
                }).modal("show");
            });
        }
    });
});

3. Finally, we will create a template for the content that will be loaded in the modal dialog, as shown in the following code:

{# templates/locations/location_popup.html #}
{% load i18n thumbnail %}
{% thumbnail location.image "200" as small_image %}
<p class="text-center">
    <img src="{{ small_image.url }}" class="img-thumbnail"
         alt="{{ location.title|escape }}" />
</p>
{% endthumbnail %}

<div class="modal-footer text-right">
    <a href="{% url "location-detail" slug=location.slug %}"
       class="btn btn-primary pull-right">
        {% trans "More" %}
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
</div>