Question

我正在尝试为我创建一个个人网站，并且我是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>

Answer 1

通用方法可以是：

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>

Answer 2

您需要更改以下代码行：

$(".modal").fadeIn();

成为：

$(this).next($(".modal")).fadeIn();

在这种情况下：当您单击任意按钮时，仅在单击按钮之后的类div的{{1}}才有效。

modal

$(document).ready(function() {
  $(".call_modal").click(function() {
    $(this).next($(".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;
}

指向相同标签的多个div

2 个答案: