时间戳

首页 > 解决方案 > 多个 div 指向同一个标签

javascript - 多个 div 指向同一个标签

问题描述

我正在尝试为我创建一个个人网站，我是 html 和 css 的初学者。在我的工作部分，我创建了多个按钮，它们打开一个小窗口并给出项目的描述。我面临的问题是所有不同的 div 都指向最后一个 div，并且最后一个 div 的内容被复制到所有其他 div 中。非常感谢您提前帮助我。

以下是我最后一个 div 的内容：

在此处输入图像描述

下面是我的第二个 div 的图像：

在此处输入图像描述

下面是整体代码：

$(document).ready(function() {
  $(".call_modal").click(function() {
    $(".modal").fadeIn();
    $(".modal_main").show();
  });
});
$(document).ready(function() {
  $(".close").click(function() {
    $(".modal").fadeOut();
    $(".modal_main").fadeOut();
  });
});
work body {
  margin: 0;
  background: #e5eaee;
}

h3 {
  font-size: 25px;
  font-weight: 700;
  text-transform: uppercase;
  color: #e1c184;
  text-align: center;
  padding: 50px 0px 0px;
  clear: both;
}

.modal {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  display: none;
}

.modal_close {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  position: fixed;
  top: 0;
  margin-left: -8px;
}

.close {
  cursor: pointer;
}

.gl1_content .modal_main {
  width: 50%;
  height: 500px;
  background: #B7BBBE;
  z-index: 4;
  position: fixed;
  top: 16%;
  border-radius: 4px;
  left: 25%;
  overflow: auto;
  -webkit-animation-duration: .5s;
  -webkit-animation-delay: .0s;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  -webkit-backface-visibility: visible!important;
  -webkit-animation-name: fadeInRight;
  text-align: center;
}

@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(20px)
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0)
  }
}

.gl1_content .content {
  padding: 50px 0px 30px;
  text-align: justify;
  margin-left: 20px;
  margin-right: 10px;
}

button {
  display: block;
  width: 25%;
  height: 150px;
  padding: 40px;
  border-radius: 5px;
  background: #3399cc;
  border: none;
  font-size: 20px;
  color: #fff;
  margin-top: 40px;
  margin-left: 80px;
  float: left;
  text-align: center;
  position: center;
}

.ProjTable {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 50%;
}

.ProjTable td,
#ProjTable th {
  border: 1px solid #ddd;
  padding: 8px;
}

.ProjTable tr:nth-child(even) {
  background-color: #f2f2f2;
}

.ProjTable tr:hover {
  background-color: #ddd;
}

.ProjTable th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: white;
  color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://gc.kis.v2.scr.kaspersky-labs.com/B55FB9A2-E45C-3242-96D3-CF26E54EC901/main.js" charset="UTF-8"></script>

<h3 id="work">Work</h3>

<div class="gl_content">
  <button class="call_modal" style="cursor:pointer;">SAS Consult and Support</button>
  <div class="modal">
    <div class="modal_close close"></div>
    <div class="modal_main">
      <img src="i783wQYjrKQ.png" class="close" style="margin-top:13px;left:96%;position:fixed;">
      <div class="content">
        <p></p>
      </div>
    </div>
  </div>
</div>

<div class="content">
  <button class="call_modal" style="cursor:pointer;">Global Reporting Infrastructure Project (GRIP)</button>
  <div class="modal">
    <div class="modal_close close"></div>
    <div class="modal_main">
      <img src="i783wQYjrKQ.png" class="close" style="margin-top:13px;left:96%;position:fixed;">
      <div class="content">
        <p><strong>Global Reporting Infrastructure Project (GRIP)</strong> is a key global initiative and is aimed at delivering a set of standard reports with standard metrics, definitions and templates across RBWM products Origination, Portfolio Management,
          Profitability and RWAs by providing a global platform for Risk data aggregation and reporting. RBWM Risk has historically lacked Group level risk aggregation and reporting capability and relied upon end user computing to produce executive reporting
          to drive risk management and decision making. Numerous inconsistencies relating to Key Performance Indicators (KPI) captured, business definitions used, calculations performed and report formats utilized are inherent with this method of reporting.
          RBWM Risk management desires a system that will provide more metrics and KPIs to drive better decision making and analysis.</p>
      </div>
    </div>
  </div>
</div>

标签： javascriptjqueryhtmlcss

解决方案

通用方法可以是：

a）首先向所有模态容器添加一个通用类（如-'modal_container'）。

<div class="gl_content modal_container">...</div>
...
<div class="content modal_container">...</div>
...

b）在单击事件时，获取被单击元素顶部的即时模态容器元素，并在其中显示/隐藏模态（模态容器）。

我已经重新设计了下面的代码，请检查它：

<script>
$(document).ready(function(){
  $(".call_modal").click(function(){
    var modal_container = $(this).closest('.modal_container');
    $(".modal", modal_container).fadeIn();
    $(".modal_main", modal_container).show();
  });

  $(".close").click(function(){
    var modal_container = $(this).closest('.modal_container');
    $(".modal", modal_container).fadeOut();
    $(".modal_main", modal_container).fadeOut();
  });
});
</script>

推荐阅读