Javascript 在模态上进行非常简单的淡入淡出

我通常对modals使用Bootstrap，但我必须使用代码来符合ADA

我正在尝试创建一个简单的淡入淡出模式

因此，如果我点击一个按钮，我可以淡入模式，并在关闭时淡出

下面是我的SCS

.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代码

  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

和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>

全部（416）
北美（12）
拉丁美洲（50）

复印件清单


世界各地正在增加更多的合作伙伴。
加入他们

如果有人能帮忙的话。我知道这可能很容易，但我在这个和其他项目的最后期限

---

谢谢。

您可以使用jQuery，它有一个

.hide（）

方法，对您很有用