在一個頁面上激活多個功能模式 -有解無憂

我正在為一個靜態網站制作這個網頁，我的目標是能夠同時打開多個模版。到目前為止，我已經把它做到了我想要的程度，但是我遇到了一些小問題。

我的主要挑戰是：

每個按鈕同時打開兩個對話框，關閉一個就關閉另一個。
當我點擊對話框進行拖動時，它在我點擊的地方跳動了幾個像素。
我還有一些其他的目標，比如影片和讓活動對話框像活動視窗一樣位于其他對話框之上，但這有點超出了我目前主要問題的范圍。

對于第一個問題，我非常確定我必須對我的腳本進行大量修改，但我不知道從哪里開始。

對于第二個問題，我很確定它是我的html或css的整體問題，但在測驗了每一行之后，我似乎仍然找不到問題所在。我肯定遺漏了什么。也許要求別人梳理我的代碼太過分了，但我在這篇文章中包含了所有的代碼，以便給你們一個最準確的例子。

僅供參考，我使用的是jquery-ui v1.12.1，沒有主題。下面是JSFiddle的內容。https://jsfiddle.net/puncushion/9tke3grp/

而下面的代碼。

html:

<! DOCTYPE html> 
<html> 
<head> 
<title>測驗專案</title> 
<link rel="styleheet" href="css/stylesheet. css">
<script src="js/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"/span>>
    <a href="index.  id="title-fn">TEST</a> 
    <a href="index.  id="title-ln">PROJECT</a>/span>
  </div>/span>
  <div class="menu"> 
    <a href="> ABOUT</a>。
    <a href="> 2019年</a>。
    <a href="> 2020年</a>
    <a href="> 2021年</a>
  </div>/span>

  <div class="content"> 
    <button class="click"/span>> 內容1</button> 
    < div class="modal" id="modal-1"> 
      <div class="modal-header">/span>
        <div class="modal-title"/span>> 內容1</div> 
        <button class="close-button"/span>> &times;</button>>
      </div>/span>
      <div class="modal-body">/span>
        毋庸置疑，這是個好主意。懸浮在空中的，是一個有尊嚴的人，是一個有活力的人，是一個有活力的人，是一個有活力的人，是一個有活力的人，是一個有活力的人。在這里，我們可以看到，我們有一個很好的機會。在這里，我想說的是，在這里，我們可以看到，我們可以看到，我們可以看到，我們可以看到，我們可以看到，我們可以看到，我們可以看到，我們可以看到，我們可以看到，我們可以看到。在這里，我們可以看到，在這里，我們可以看到，在這里，我們可以看到，在這里，我們可以看到，在這里，我們可以看到，在這里，我們可以看到。在這里，我們可以看到，在這里，我們可以看到，在這里，我們可以看到，在這里，我們可以看到，在這里，我們可以看到，在這里，我們可以看到。懸空的食物，在前的摩爾斯提斯（molestie convallis semper），無名氏在前的apibus，eget facilis magna ex sit amet lacus。在Auctor sit amet velit id ultrices。暫停使用。Sed dapibus, massa eget egestas luctus, massa neque luctus mi, dictum dignissim urna neque eu urna. 在這里，我們可以看到，在這里，我們可以看到，在這里，我們可以看到，在這里，我們可以看到，在這里，我們可以看到，在這里，我們可以看到，在這里，我們可以看到，在這里，我們可以看到，在這里，我們可以看到，在這里，我們可以看到，在這里，我們可以看到，在這里，我們可以看到，在這里，我們可以看到 在這里，我們可以看到，在這里，我們可以看到，在這里，我們可以看到，在這里，我們可以看到，在這里，我們可以看到，在這里，我們可以看到，在這里，我們可以看到，在這里，我們可以看到，在這里，我們可以看到，在這里，我們可以看到 懸崖峭壁上，有一棵樹，樹上有一棵樹。在這里，你可以看到你的朋友。凝結在一起的是一個沒有尊嚴的地方。在這里，你可以看到你的生命力。在這里，我想說的是，我們要做的是，在我們的生活中，我們要做的是，在我們的生活中，我們要做的是，在我們的生活中，我們要做的是。
      </div>。
    </div>/span>

    <button class="click"/span>> 內容2</button> 
    < div class="modal" id="modal-2"> 
      <div class="modal-header">/span>
        <div class="modal-title"/span>> 內容2</div> 
        <button class="close-button"/span>> &times;</button>>
      </div>/span>
      <div class="modal-body">/span>
        毋庸置疑，這是個好主意。懸浮在空中的，是一個有尊嚴的人，是一個有活力的人，是一個有活力的人，是一個有活力的人，是一個有活力的人，是一個有活力的人。在這里，我們可以看到，我們有一個很好的機會。在這里，我想說的是，在這里，我們可以看到，我們可以看到，我們可以看到，我們可以看到，我們可以看到，我們可以看到，我們可以看到，我們可以看到，我們可以看到，我們可以看到。在這里，我們可以看到，在這里，我們可以看到，在這里，我們可以看到，在這里，我們可以看到，在這里，我們可以看到，在這里，我們可以看到。在這里，我們可以看到，在這里，我們可以看到，在這里，我們可以看到，在這里，我們可以看到，在這里，我們可以看到，在這里，我們可以看到。懸空的食物，在前的摩爾斯提斯（molestie convallis semper），無名氏在前的apibus，eget facilis magna ex sit amet lacus。在Auctor sit amet velit id ultrices。暫停使用。Sed dapibus, massa eget egestas luctus, massa neque luctus mi, dictum dignissim urna neque eu urna. 在這里，我們可以看到，在這里，我們可以看到，在這里，我們可以看到，在這里，我們可以看到，在這里，我們可以看到，在這里，我們可以看到，在這里，我們可以看到，在這里，我們可以看到，在這里，我們可以看到，在這里，我們可以看到，在這里，我們可以看到，在這里，我們可以看到，在這里，我們可以看到 在這里，我們可以看到，在這里，我們可以看到，在這里，我們可以看到，在這里，我們可以看到，在這里，我們可以看到，在這里，我們可以看到，在這里，我們可以看到，在這里，我們可以看到，在這里，我們可以看到，在這里，我們可以看到 懸崖峭壁上，有一棵樹，樹上有一棵樹。在這里，你可以看到你的朋友。凝結在一起的是一個沒有尊嚴的地方。在這里，你可以看到你的生命力。在這里，我想說的是，我們要做的是，在我們的生活中，我們要做的是，在我們的生活中，我們要做的是，在我們的生活中，我們要做的是。
      </div>。
    </div>/span>
  </div>/span>
</div>/span>

</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;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas:
    "title title title subtitle menu"; grid-template-areas.
    ".content 內容 . 選單"。
}

.title {
  grid-area: title;
  字體大小。2em;
  font-weight: bold;
  letter-spacing: 15px;
  position: fixed;
}

#title-fn{
  color: black;
  text-decoration: none;
  寫作模式: vertical-rl;
  transform: 旋轉（180deg）。
}

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

.menu {
  grid-area: menu;
  寫作模式: vertical-rl;
  word-spacing: 50px;
  position: fixed;
  top: 50%;
  left: 50%;
  right: 2px;
  transform: 旋轉（180deg）。
  transform: translate(0, -50%)。
}

.content {
  grid-area: content;
}

.click {
  background-color: #ecc;
  color: black;
  cursor: 指標。
  width: 100%。
  border: none;
  border-bottom: solid;
  border-width: thin;
  padding-top: .5rem;
  padding-bottom: .5rem;
  padding-left: 0rem;
  text-align: left;
  outline: none;
  字體大小: 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: 指標。
  border: none;
  outline: none;
  background: none;
  字體大小: 1.5rem;
}

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

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

::-webkit-scrollbar-track {
  背景。#ecc;
}

::-webkit-scrollbar-thumb {
  背景。#888;
}

::-webkit-scrollbar-thumb:hover {
  背景。#555;
}

js:

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

  $(".close-button").click(function(){
    $(".modal"/span>).hide()。
  });
});

uj5u.com熱心網友回復：

如果我沒有理解錯的話，你想要的是每個模態分別被打開和關閉，但是能夠同時打開兩個。

那么你就必須為每個被點擊的按鈕呼叫特定的模態。通過呼叫".next "模態來打開（因為它們是直系兄弟），以及呼叫".closest "來`在點擊關閉按鈕時找到正確的模態.

這樣做。

$(document).ready(function(>/span>) {
  $('.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/

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/319914.html

標籤：

上一篇：當幻燈片處于活動狀態時，改變標簽的顏色

下一篇：使用jquerysortable對表格資料進行排序和保存