Fade in Modal Help Button and Modal

Fade in a modal help button. Fade in the content when clicked.

by Amy Ruddy

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/css/bootstrap.min.css" integrity="sha384-DhY6onE6f3zzKbjUPRc2hOzGAdEf4/Dz+WJwBvEYL/lkkIsI3ihufq9hk9K4lVoK" crossorigin="anonymous">
  <div class="d-flex flex-column h-100">
    <div role="main" class="flex-shrink-0">
      <div class="p-3">
        <h1>Fade In Down Modal Help Button</h1>
        <h5>Fade in a help button after 3 seconds to draw attention to the user.</h5>
        <hr>
        <p><strong>Q:</strong> Why take the time to build from scratch, (i.e., why not use a third party library?)</p>
        <p><strong>A:</strong> I work with Azure AD B2C. Using Bootstrap for modals was causing display issues and JavaScript errors. Azure AD B2C does not work with most third party JS frameworks; therefore, the button and modal behavior need to be coded from scratch.</p>
        <p>Fully responsive and mobile friendly. The button size is based on vertical width. The modal content is 100% width on small devices and max width of 576px and centered on larger devices and desktops</p>
        <button class="btn btn-primary" onClick="window.location.reload();">Replay Animation <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-arrow-clockwise" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z" />
            <path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z" />
          </svg></button>
      </div>
    </div>

  </div>

  <!-- Modal Help Button -->
  <div type="button" id="fa_modal_help_button" class="fa_modal_open" onclick="reloadJSFiddleFrame()">
    <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-question-circle" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
      <path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"></path>
     ...

SCSS

h1 {
  color: #1e4c82;
}

.fa_modal_backdrop {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: #1e4c82;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 10000; }
  @media (min-width: 576px) {
    .fa_modal_backdrop {
      padding: 50px 0.5rem 0.5rem 0.5rem; } }

/* Modal Content */
.fa_modal_content {
  position: relative;
  background-color: #ffffff;
  margin: auto;
  max-width: 576px;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.6s;
  animation-name: animatetop;
  animation-duration: 0.6s;
  color: #000000; }
  .fa_modal_content a {
    text-decoration: none; }
    .fa_modal_content a:hover {
      text-decoration: underline; }
    .fa_modal_content a:focus {
      outline-color: inherit; }
  .fa_modal_content a {
    color: #1e4c82; }

@-webkit-keyframes animatetop {
  from {
    top: -200px;
    opacity: 0; }
  to {
    top: 0;
    opacity: 1; } }

@keyframes animatetop {
  from {
    top: -200px;
    opacity: 0; }
  to {
    top: 0;
    opacity: 1; } }
  @media (min-width: 576px) {
    .fa_modal_content {
      border-radius: 0.25rem; } }
  .fa_modal_content .fa_modal_header {
    padding: 1rem 2rem;
    border-bottom: 1px solid rgba(30, 76, 130, 0.25); }
    @media (min-width: 769px) {
      .fa_modal_content .fa_modal_header {
        border-top-left-radius: 0.25rem;
        border-top-right-radius: 0.25rem; } }
  .fa_modal_content .fa_modal_close {
    position: absolute;
    top: 0.9rem;
    right: 1.5rem;
    cursor: pointer;
    color: inherit;
    opacity: 0.85;
    font-size: 1.5rem;
    padding: 0 0.5rem; }

.fa_modal_body {
  padding: 2rem;
  font-size: 1rem; }
  .fa_modal_body div:not(.help_desk_email) {
    margin-bottom: 1rem; }

#fa_modal_help {
  display: none; }
  #fa_modal_help p:last-of-type {
    margin-bottom: 0; }
  #fa_modal_help .fa_modal_header {
    color:...

JavaScript

function modalOpen() {

  $('.fa_modal').show();

}

function modalClose() {

  $('.fa_modal').hide();

}

$('.fa_modal_open').click(function() {

  modalOpen();

});

$('.fa_modal_close').click(function() {

  modalClose();

});


var modalHelp = document.getElementById('fa_modal_help');

window.onclick = function(event) {

  if (event.target === modalHelp) {

    modalHelp.style.display = "none";

  }

};