Date: April 11th 2016
Last updated: April 11th 2016

I like modals (pop up window). Getting a modal to work with Django doesnt require anything special. However, there is one little trick that took me a while to figure out. The "trick" happens at the html button that opens the modal. Specifically, you need to provide a definition in the data-target.

In this example I have added "#" to the data-target which allowed me to access the board object inside the modal. I found the solution on stackoverflow (

def profilepage(request, surfer_id):
    surfer_profile = dict()
    surfer = get_object_or_404(Surfer, pk=surfer_id)
    boardstest = surfer.boards.all()
    return render(request, 'surferprofile/profile.html',{'boardstest': boardstest})

HTML Template

<!-- add jquery and bootstrap CSS -->
  <script src=""></script>
  <script src=""></script>

<!-- loop over boardstest and provide either an edit button or view button -->
{% for board in boardstest %}
    {% if == %}
    <!-- provide an edit button -->
    <a href="{% url 'surferprofile:editboard' %}"
    style="color: blue; text-decoration: none;">edit</a>

    {% else %}
    <!-- Otherwise provide a view button -->
    <p><button style="width: 50px;" type="button"
                class="btn btn-primary" data-toggle="modal"
                data-target="#{{}}"> view </button></p>

      <div id="{{}}" class="modal fade" tabindex="-1" role="dialog"
                        aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg">
              <div class="modal-content">
                  <div class="modal-body">
                      <p> <h2>Board specs</h2><br>

    {% endif %}
{% endfor %}

<!-- add to the bottom of the HTML template (just above </body> tag) -->
    function centerModal() {
        $(this).css('display', 'block');
            var $dialog = $(this).find(".modal-dialog");
            var offset = ($(window).height() - $dialog.height()) / 2;
            // Center modal vertically in window
            $dialog.css("margin-top", offset);

        $('.modal').on('', centerModal);
        $(window).on("resize", function () {

results matching ""

    No results matching ""