{% extends 'base0.html' %}
{% load markup %}

{% block page-content %}

{% filter restructuredtext %}

Bootstrap provides a specific (somehow limited) plugin to handle modals:

https://getbootstrap.com/docs/4.0/components/modal/

You can ask for a larger or smaller dialog specifing either 'modal-lg' or 'modal-sm' class.

The pluging fires some specific events during the modal life cycle:

https://getbootstrap.com/docs/4.0/components/modal/#events

{% endfilter %}

    <h2 class="code-sample">Code sample</h2>
    <div>A basic modal box with Bootstrap</div>

    <button id="button-open-modal" class="btn btn-primary">Open Modal</button>
    <button id="button-open-large-modal" class="btn btn-primary">Open Large Modal</button>
    <button id="button-open-small-modal" class="btn btn-primary">Open Small Modal</button>

    <!-- Modal -->
    <div id="myModal" class="modal" tabindex="-1" role="dialog">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">Modal title</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <p>Modal body text goes here.</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-primary">Save changes</button>
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>

{% endblock page-content %}


{% block extrajs %}
    <script type="text/javascript">

        'use strict';

        $(document).ready(function() {

            $('#button-open-modal').on('click', function(event) {
                set_modal_size('');
                $('#myModal').modal('show');
            })

            $('#button-open-large-modal').on('click', function(event) {
                set_modal_size('modal-lg');
                $('#myModal').modal('show');
            })

            $('#button-open-small-modal').on('click', function(event) {
                set_modal_size('modal-sm');
                $('#myModal').modal('show');
            })

            // Show modal events
            $('#myModal')
                .on('show.bs.modal', function(event) {console.log('show.bs.modal'); })
                .on('shown.bs.modal', function(event) {console.log('shown.bs.modal'); })
                .on('hide.bs.modal', function(event) {console.log('hide.bs.modal'); })
                .on('hidden.bs.modal', function(event) {console.log('hidden.bs.modal'); })
        });

        function set_modal_size(css_class) {
            var dialog = $('#myModal').find('.modal-dialog');
            dialog.removeClass('modal-lg modal-sm');
            dialog.addClass(css_class);
        }


    </script>
{% endblock %}