Modals
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.
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">×</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>