Modals

Last edited 4/16/2020
A modal box is a lightweight pop-up that can be used to let users quickly view additional information. Try out the examples below:

These examples use embedded class schedules. This is done by copying the web address found on the event reports tab.

The code used to create modals is fairly advanced. We are providing it here so councils may use it independently if they wish, but please reach out to us if you need any assistance.

Code:

<!-- Button trigger modal 1 -->

<p><button class="btn btn-primary btn-lg" data-target="#myModal" data-toggle="modal" type="button">Week 1 Classes</button><!-- Button --></p>

<div aria-labelledby="myModalLabel" class="modal fade" id="myModal" role="dialog" tabindex="-1">
  <div class="modal-dialog" role="document">
    <div class="modal-content">

      <div class="modal-header"><button aria-label="Close" class="close" data-dismiss="modal" type="button">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Week 1 Class Schedule</h4>
      </div>

      <div class="modal-body">
        <iframe allowfullscreen="" frameborder="0" height="300" overflow-x="hidden" src="URL GOES HERE" width="100%"></iframe>
      </div>

      <div class="modal-footer"><button class="btn btn-default" data-dismiss="modal" type="button">Close</button></div>
    </div>
  </div>
</div>

 

We are always happy to assist with website training.
Contact Tentaroo
Schedule a Training