首页 / 技术问答 / Javascript问答列表 / 问答详情

Javascript 如何使用 js 激活多个模态框

我有一个模式框，只需按一下按钮就可以打开.一切都运行得很好.然而，我需要在我的页面上另一个模式框，所以我复制了第一个模式框，但这不是在点击按钮打开.

我想做的是用相同的类和相同的js函数触发第二个模式，这样就不会添加更多的代码.这样的事情有可能发生吗？

或者，我如何通过添加最少的代码来激活第二个模式？

/* Modal Box Js */
const modal = document.querySelector(".modal");
const trigger = document.querySelector(".trigger");
const closeButton = document.querySelector(".close-button");

function toggleModal() {
    modal.classList.toggle("show-modal");
}

function windowOnClick(event) {
    if (event.target === modal) {
        toggleModal();
    }
}

trigger.addEventListener("click", toggleModal);
closeButton.addEventListener("click", toggleModal);
window.addEventListener("click", windowOnClick);
/**********
Modal Box Style
**********/
.trigger {cursor: pointer;}

.modal {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transform: scale(1.1);
  transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
}

.modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 20px;
  width: 40rem;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
}

.msg-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 12px;
}

.msg-text {
  font-size: 14px;
  margin-bottom: 6px;
  color: #5B616D;
}

.close-button {
  float: right;
  width: 1.5rem;
  line-height: 1.5rem;
  text-align: center;
  cursor: pointer;
  border-radius: 0.25rem;
  background-color: lightgray;
  align-self: end;
}

.close-button:hover {
  background-color: darkgray;
}

.show-modal {
  opacity: 1;
  visibility: visible;
  transform: scale(1.0);
  transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
}
<!-- Modal Box 1 -->
<div class="trigger">Modal Box 1</div>
<div class="modal">
  <div class="modal-content">
    <span class="close-button">×</span>
    <span class="msg-title">Title 1</span>
    <span class="msg-text">
      “If you are distressed by anything external, the pain is not due to the thing itself, but to your estimate of it;       and this you have the power to revoke at any moment.”
      ― Marcus Aurelius.
    </span>
  </div>
</div>


<!-- Modal Box 2 -->
<div class="trigger">Modal Box 2</div>
<div class="modal">
  <div class="modal-content">
    <span class="close-button">×</span>
    <span class="msg-title">Title 2</span>
    <span class="msg-text">
      “If you are distressed by anything external, the pain is not due to the thing itself, but to your estimate of it;       and this you have the power to revoke at any moment.”
      ― Marcus Aurelius.
    </span>
  </div>
</div>

推荐答案

您的主要问题是没有使用NodeList.forEach将点击分配给所需的元素，也没有循环情态函数来切换"open"类.

以下是代码的一个变体，它使用了前面提到的更好的工具，即使用data-*属性来引用要切换的所需模式，即data-modal，它可以分配给任何按钮或元素，并接受目标模式的ID Select 器.因此，您不必局限于具有特定的HTML struct ，也不必在每个模式下只使用一个按钮元素.

另一个已修复的问题是:永远不要在CSS中使用负转换来居中显示您的模式内容.取而代之的是在flex父级中使用margin: auto.另外，添加一些滚动条！(参见我在css中的 comments )

// DOM helpers:

const el = (sel, par) => (par || document).querySelector(sel);
const els = (sel, par) => (par || document).querySelectorAll(sel);

// Task: Modal Box

const elsModals = els(".modal");
const elsModalBtns = els("[data-modal]");

const modalToggle = (id) => {
  el(id).classList.toggle("show-modal");
};

const modalsClose = (evt) => {
  // Do nothing, click was inside a modal or modal button:
  if (evt.target.closest(".modal-content") || evt.target.closest("[data-modal]")) return;
  // Else, close all modals:
  elsModals.forEach(elMod => elMod.classList.remove("show-modal"));
}

elsModalBtns.forEach(elBtn => {
  elBtn.addEventListener("click", () => modalToggle(elBtn.dataset.modal));
});

addEventListener("click", modalsClose);
/*
 * Modal Box
 */

.trigger {
  cursor: pointer;
}

.modal {
  position: fixed;
  display: flex;
  /* use flex!!! */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transform: scale(1.1);
  transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
}

.modal-content {
  margin: auto; /* center inside flex parent */
  overflow: auto; /* scroll inner content if needed */
  max-height: 70vh; /* make it scroll if exceeds this height */
  background-color: white;
  padding: 20px;
  width: 40rem;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
}

.msg-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 12px;
}

.msg-text {
  font-size: 14px;
  margin-bottom: 6px;
  color: #5B616D;
}

.close-button {
  text-align: center;
  cursor: pointer;
  border-radius: 0.25rem;
  background-color: lightgray;
  align-self: end;
  border: 0;
  font-size: 1.2rem;
}

.close-button:hover {
  background-color: darkgray;
}

.show-modal {
  opacity: 1;
  visibility: visible;
  transform: scale(1.0);
  transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
}
<div class="trigger" data-modal="#modal-lorem">Modal Box 1</div>
<div class="trigger" data-modal="#modal-aurelius">Modal Box 2</div>

<div id="modal-lorem" class="modal">
  <div class="modal-content">
    <button type="button" class="close-button" data-modal="#modal-lorem">×</button>
    <span class="msg-title">Title 1</span>
    <span class="msg-text">
      “Dolor sit amet, consectetur adipisicing elit. Numquam earum debitis architecto, temporibus quod maxime velit, rem ex nam eum ea illum, assumenda nesciunt consectetur quaerat. Accusamus reprehenderit, distinctio et!
”
      ― Lorem ipsum.
    </span>
  </div>
</div>


<div id="modal-aurelius" class="modal">
  <div class="modal-content">
    <button type="button" class="close-button" data-modal="#modal-aurelius">×</button>
    <span class="msg-title">Title 2</span>
    <span class="msg-text">
      “he pain is not due to the thing itself, but to your estimate of it;       and this you have the power to revoke at any moment.”
      ― Marcus Aurelius.
    </span>
  </div>
</div>

Javascript相关问答推荐

使用JavaScript单击上一个或下一个特定按钮创建卡滑动器以滑动单个卡

从实时数据库(Firebase)上的子类别读取数据

如何将连续的十六进制字符串拆分为以空间分隔的十六进制块，每个十六进制块包含32个二元组？

Plotly热图：在矩形上zoom 后将zoom 区域居中

Angular：动画不启动

Websocket错误—有一个或多个保留位开启：reserved1 = 1，reserved2 = 0，reserved3 = 0

可更改语言的搜索栏

无法使用单击按钮时的useState将数据从一个页面传递到另一个页面

我在Django中的视图中遇到多值键错误

JavaScript是否有多个`unfined`？

邮箱密码重置链接不适用于已部署的React应用程序

如何在HTMX提示符中设置默认值？

为什么云存储中的文件不能公开使用？

为什么延迟在我的laravel项目中不起作用？

如果NetSuite中为空，则限制筛选

FindByIdAndUpdate在嵌套对象中创建_id

如何压缩图像并将其编码为文本？

检测带有委托的元素内部的点击，以及元素何时按其类名被选中

Reaction：从子组件调用父组件中的函数

使用Firebase实时数据库`update`在同一 node 上执行多个更新

实用课程推荐
相关教程推荐
休闲君评测 |  TOOLFK工具网 |  chrome插件网 |  古诗文网 |  良许Linux教程网 |  Python之禅 |  红色石头 |  豪评测 |  入党申请书 | 

© 2020 Hi LearnFk 意见反馈 免责声明 关于我们 桂ICP备11002319号-3 友链&广告位+QQ: 1963612630