modal.html

<!-- The background that prevents the user from doing anything unwanted -->
<div class="overlayPanel"></div>

<!-- 
  The modal itself
  This will give you a basic modal with a fixed width
-->
<div class="modal">
    <header class="modal-head">
        ...
    </header>
    <div class="modal-body">
        ...
    </div>
    <footer class="modal-footer">
        ...
    </footer>
</div>

<!--
  Modifier classes can be added to change how the modal looks/behaves
-->

<div class="modal large"> ... </div> <!-- full width of container -->
<div class="modal medium"> ... </div> <!-- 50% width of container -->
<div class="modal small"> ... </div>  <!-- 25% width of container -->
<div class="modal animate"> ... </div> <!-- animate the modal into view -->

<div class="modal"> ... </div> <!-- no modifier gives width of max-width: 500px -->

<a href="#" class="modal-close">Close</a> <!-- close the modal -->