Custom Modal

Custom Modal

This is a custom modal to use when Foundation's modal isn't working correctly.

<link rel="stylesheet" type="text/css" href="/framework/styles/css/portal/controls/custom-modal.css">
<script src="/framework/scripts/custom-modal.js"></script>

<button type="button" class="button custom-modal-btn">Custom Modal Button</button>

<div class="custom-modal">
  <h3>Content Here</h3>
  <p>This is a custom modal to use when Foundation's modal isn't working correctly.</p>
  <button type="button" class="custom-modal-close" aria-label="Close">×</button>
</div>



Custom Locked Modal

This is a locked version of the custom modal can be used when Foundation's modal isn't working correctly.

<link rel="stylesheet" type="text/css" href="/framework/styles/css/portal/controls/custom-modal.css">
<script src="/framework/scripts/custom-modal.js"></script>

<button type="button" class="button custom-modal-locked-btn">Custom Modal Locked Button</button>

<div class="custom-modal">
  <h3>Content Here</h3>
  <p>This is a custom modal to use when Foundation's modal isn't working correctly.</p>
  <button type="button" class="custom-modal-locked-close" aria-label="Close">×</button>
</div>