在模态上做一个非常简单的淡入淡出

Question

I normally use Bootstrap for modals but I had to use code for ADA compliance.

I'm trying to create a simple fade-in and fade-out on a modal.

So, if I click on a button, I can fade into the modal and fade out when closing.

Below is my scss

.dialog-backdrop {
  display: none;
  position: fixed;
  overflow-y: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}


@media screen and (min-width: 640px) {
  .dialog-backdrop {
    /*background: rgba(0, 0, 0, 0.3);*/
    background: rgba(0, 14, 51, 0.8);
  }
}

.dialog-backdrop.active {
  display: block;
}

.no-scroll {
  overflow-y: auto !important;
}

/* this is added to the body when a dialog is open */
.has-dialog {
  overflow: hidden;
}

.modal {
  position: absolute;
  z-index: 1000;
  width: calc(100% - 30px);
  max-width: 1112px;
  height: 789px;
  max-height: 789px;
  left: 50%;
  transform: translate(-50%,0);
  top: 100px;
  background: #f6f6f6;
  box-sizing: border-box;
  padding: 15px;

  &.hidden{
    display: none;
  }

  *::-webkit-scrollbar {
    display: initial;
  }

js code

  window.openDialog = function (dialogId, focusAfterClosed, focusFirst) {
    var dialog = new aria.Dialog(dialogId, focusAfterClosed, focusFirst);
  };

  window.closeDialog = function (closeButton) {
    var topDialog = aria.getCurrentDialog();
    if (topDialog.dialogNode.contains(closeButton)) {
      topDialog.close();
    }
  }; // end closeDialog

and html

  <div id="dialog_layer" class="dialogs">
    <div class="dialog-backdrop zmax">
      <div tabindex="0"></div>
      <div id="dialog1" role="dialog" aria-modal="true" aria-label="Partner Search" class="hidden modal">
        <img src="img/modal/close-icon.svg" class="closeModal" alt="Close" onclick="closeDialog(this)" />
        <div class="modalContent">

          <form autocomplete="off" action="">
            <div id="search" class="autocomplete search">
              <img src="img/modal/magnifier.svg" alt="Search" />
              <input id="myInput" type="text" placeholder="Search our participating banks or corporations" />
            </div>
          </form>


          <div class="resultsContent">
            <div id="bankRegions" class="bankRegions">
              <ul>
                <li id="All">All (416)</li>
                <li id="North America">North America (12)</li>
                <li id="Latin America">Latin America (50)</li>
              </ul>
            </div>

            <div id="modalResults" class="modalResults">
              <div class="copyList">Copy List</div>
              <div id="resultsList" class="resultsList">
                <ul id="banks">
                </ul>
              </div>
            </div>
          </div>
        </div>
        <div class="ribbonModal">
          <span class="ribbonModalText">
            More partners are being added around the world.
          </span>
          <span class="ribbonJoinThem">
            Join Them <img src="img/modal/arrow.svg" class="ribbonArrow" alt="Join Them" />
          </span>
        </div>
      </div>
    </div>
  </div>

If anyone can help. I know this may be easy, but I'm on a deadline with this and other items.

Thanks.

Answer 1

您可以使用 jQuery，它有一个对您有用的.hide()方法！