在单个页面上激活多个功能模式

Question

我正在为静态网站开发此网页，我的目标是能够同时打开多个模式。到目前为止，我已经把它拿到了我想要的地方，但是我运行遇到了一些小问题。

我的主要挑战是：

每个按钮会同时打开两个对话框，关闭一个会关闭另一个。
当我点击要拖动的对话框时，它会从我点击的位置跳转几个像素。
我还有其他一些目标，比如动画和让活动对话框像活动对话框一样位于其他对话框之上 window，但这有点超出了我目前主要问题的范围。

对于第一个问题，我很确定我必须大量更改我的脚本，但我不知道从哪里开始。

对于第二个问题，我很确定这是我的 html 或 css 总体上的问题，但是在测试了每一行之后，我似乎仍然找不到问题。我肯定错过了什么。也许要求某人梳理我的代码太过分了，但我已经将所有这些都包含在这个 post 中，以便为大家提供最准确的示例。

仅供参考，我使用的是没有主题的 jquery-ui v1.12.1。这是 JSFiddle：https://jsfiddle.net/puncushion/9tke3grp/

下面是代码。

html:

<!DOCTYPE html>
<html>
<head>
<title>Test Project</title>
<link rel="stylesheet" href="css/stylesheet.css">
<script src="js/jquery/jquery.js" type="text/javascript"></script>
<script src="js/jqueryui/jquery-ui.js" type="text/javascript"></script>
<script src="js/script.js" type="text/javascript"></script>
</head>

<body>

<div class="container">
  <div class="title">
    <a href="index.html" id="title-fn">TEST</a>
    <a href="index.html" id="title-ln">PROJECT</a>
  </div>
  <div class="menu">
    <a href="">ABOUT</a>
    <a href="">2019</a>
    <a href="">2020</a>
    <a href="">2021</a>
  </div>

  <div class="content">
    <button class="click">Content 1</button>
    <div class="modal" id="modal-1">
      <div class="modal-header">
        <div class="modal-title">Content 1</div>
        <button class="close-button">&times;</button>
      </div>
      <div class="modal-body">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ullamcorper, nisi ac dignissim venenatis, felis nibh luctus neque, a dictum sem risus sed mi. Mauris eu justo est. Donec sagittis, dui at efficitur aliquam, risus neque rutrum arcu, id varius ligula odio non enim. Maecenas ut odio vel dui dapibus venenatis. Etiam justo massa, consectetur ut nunc et, cursus condimentum metus. Suspendisse condimentum, ante molestie convallis semper, nunc felis dapibus ante, eget facilisis magna ex sit amet lacus. In auctor sit amet velit id ultrices. Suspendisse potenti. Sed dapibus, massa eget egestas luctus, massa neque luctus mi, dictum dignissim urna neque eu urna. Proin efficitur, ligula sit amet fringilla malesuada, tortor eros ullamcorper ligula, at vestibulum lacus erat et turpis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse luctus bibendum ligula, eget vehicula risus finibus eu. Morbi in feugiat orci. Curabitur pharetra lacinia erat non dignissim. Donec vitae ipsum at augue venenatis tempus in at purus. Aenean varius eros dui, sit amet porttitor tellus condimentum quis.
      </div>
    </div>

    <button class="click">Content 2</button>
    <div class="modal" id="modal-2">
      <div class="modal-header">
        <div class="modal-title">Content 2</div>
        <button class="close-button">&times;</button>
      </div>
      <div class="modal-body">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ullamcorper, nisi ac dignissim venenatis, felis nibh luctus neque, a dictum sem risus sed mi. Mauris eu justo est. Donec sagittis, dui at efficitur aliquam, risus neque rutrum arcu, id varius ligula odio non enim. Maecenas ut odio vel dui dapibus venenatis. Etiam justo massa, consectetur ut nunc et, cursus condimentum metus. Suspendisse condimentum, ante molestie convallis semper, nunc felis dapibus ante, eget facilisis magna ex sit amet lacus. In auctor sit amet velit id ultrices. Suspendisse potenti. Sed dapibus, massa eget egestas luctus, massa neque luctus mi, dictum dignissim urna neque eu urna. Proin efficitur, ligula sit amet fringilla malesuada, tortor eros ullamcorper ligula, at vestibulum lacus erat et turpis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse luctus bibendum ligula, eget vehicula risus finibus eu. Morbi in feugiat orci. Curabitur pharetra lacinia erat non dignissim. Donec vitae ipsum at augue venenatis tempus in at purus. Aenean varius eros dui, sit amet porttitor tellus condimentum quis.
      </div>
    </div>
  </div>
</div>

</body>
</html>

css:

html, body {
  height: 100%;
  margin: 0px;
  background: #ecc;
  font-family: sans-serif;
}

.container {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas:
    "title title title title subtitle menu"
    ". content content content . menu";
}

.title {
  grid-area: title;
  font-size: 2em;
  font-weight: bold;
  letter-spacing: 15px;
  position: fixed;
}

#title-fn {
  color: black;
  text-decoration: none;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

#title-ln {
  color: black;
  text-decoration: none;
  position: fixed;
}

.menu {
  grid-area: menu;
  writing-mode: vertical-rl;
  word-spacing: 50px;
  position: fixed;
  top: 50%;
  left: 50%;
  right: 2px;
  transform: rotate(180deg);
  transform: translate(0, -50%);
}

.content {
  grid-area: content;
}

.click {
  background-color: #ecc;
  color: black;
  cursor: pointer;
  width: 100%;
  border: none;
  border-bottom: solid;
  border-width: thin;
  padding-top: .5rem;
  padding-bottom: .5rem;
  padding-left: 0rem;
  text-align: left;
  outline: none;
  font-size: 1em;
}

.modal{
    border:solid;
    border-width: thin;
    background-color: #ecc;
    width: 300px;
    max-height: 80%;
    display:none;
    position:absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
}

.modal-header {
  cursor: move;
  padding: .5rem .5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: solid;
  border-width: thin;
}

.modal-header .close-button {
  cursor: pointer;
  border: none;
  outline: none;
  background: none;
  font-size: 1.5rem;
}

.modal-body {
  padding: .5rem .5rem;
  max-height: calc(100vh - 210px);
  overflow-y: auto;
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #ecc;
}

::-webkit-scrollbar-thumb {
  background: #888;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

js:

$(document).ready(function(){
  //draggable
  $('.click').click(function(){
    $('.modal').show();
    $('.modal').draggable({handle:'.modal-header'});
  });

  $(".close-button").click(function(){
    $(".modal").hide();
  });
});

Answer 1

如果我没看错的话，你想要的是分别打开和关闭每个模式，但能够同时打开它们。

然后您必须为每个单击的按钮调用特定的模式。为此，调用“.next”打开模式（因为它们是直接兄弟姐妹），并调用“.closest”以在单击关闭按钮时找到正确的模式。

$(document).ready(function() {
  $('.click').click(function() {
    $(this).next('.modal').show();
    $(this).next('.modal').draggable({
      handle: '.modal-header'
    });
  });

  $(".close-button").click(function() {
    $(this).closest(".modal").hide();
  });
});

这里有可用的 JSFiddle：https://jsfiddle.net/Bettylex/4xcq0f2a/3/

在单个页面上激活多个功能模式

Multiple functional modals active on a single page

html

jquery

css

jquery-ui

modal-dialog