时间戳

首页 > 解决方案 > 单击时出现错误的模式弹出窗口（html、css、js）

javascript - 单击时出现错误的模式弹出窗口（html、css、js）

问题描述

我无法弄清楚如何让每个示例都有一个带有自己内容的模式。目前，如果我点击EXAMPLE2，来自EXAMPLE1的内容仍然会弹出。我也不确定为什么图标或模式在这里不起作用，但我希望有人至少可以根据这里的代码给出指示。我尝试将 ID 更改为唯一，但我认为我做得不对？先感谢您

function togglePopup(){
  document.getElementById("popup-1").classList.toggle("active");
}
function togglePopup(){
  document.getElementById("popup-2").classList.toggle("active");
}
.icon-inner {
  width: 120px;
  /*height: 40vh;*/
  float: left;
  padding-right: 20px;
  text-align: center;
  /*position: relative;*/
  border-radius: 50%;
  position: relative;
  display: inline-block;
}

/*.icon-inner span {
  float: left;
  padding-left: 20px;
  text-align: center;
  position: relative;
  border-radius: 50%;
  display: inline-block;
}*/

.icon-inner span:before {
  margin-left: 0;
  font-size: 40px;
}

.icon-inner span:hover {
  margin-left: 0;
  font-size: 40px;
  color: #4FC1E9;
  cursor: pointer;
}


.icon-inner-info span:before {
  height: 15px;
  width: 20px;
  margin-left: 0;
  padding-left: 2px;
  padding-right: 5px;
  font-size: 12px;
  /*float: flex;*/
  position: relative;
}

.icon-inner-info span:hover {
  margin-left: 0;
  cursor: help;
  position: relative;
  padding-right: 5px;
}

.icon-inner-info .tooltiptext {
  visibility: hidden;
  width: 400px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  top: -5px;
  left: 110%;
}

.icon-inner-info .tooltiptext::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent black transparent transparent;
}

.icon-inner-info:hover .tooltiptext {
  visibility: visible;
}


.popup .overlay {
  position:fixed;
  top:0px;
  left:0px;
  width:100vw;
  height:100vh;
  background:rgba(0,0,0,0.7);
  z-index:1;
  display:none;
}

.popup .content-pop {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%) scale(0);
  background:#fff;
  width:500px;
  height:250px;
  z-index:2;
  text-align:center;
  padding:20px;
  box-sizing:border-box;
  font-family:"Open Sans",sans-serif;
}

.popup .close-btn {
  cursor:pointer;
  position:absolute;
  right:20px;
  top:20px;
  width:30px;
  height:30px;
  background:#222;
  color:#fff;
  font-size:25px;
  font-weight:600;
  line-height:30px;
  text-align:center;
  border-radius:50%;
}

.popup.active .overlay {
  display:block;
}

.popup.active .content-pop {
  transition:all 300ms ease-in-out;
  transform:translate(50%,-50%) scale(1);
}

@media(max-width: 750px) {
  .popup.active .content-pop { 
    transform:translate(-10%,-50%) scale(1);
  } 
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=devide-width, initialpscale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="style.css">
    <!-- link for back to top button -->
    <!-- <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous"> --> 
    <link rel="stylesheet" href="font/flaticon.css">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<!--  -->


  </head>
<body>
  <div class="icon-inner">
                  <span class="flaticon-statistics" onclick="togglePopup()"></span>
                  <p>TITLE1</p>
                    <!-- <p class="tooltiptext">Interviewing, notetaking, storytelling</p> -->
                  <div class="popup" id="popup-1">
                    <div class="overlay"></div>
                    <div class="content-pop">
                      <div class="close-btn" onclick="togglePopup()">&times;</div>
                      <h1>Title1</h1>
                      <p>example1</p>
                    </div>
                  </div>
                </div>
  <div class="icon-inner">
                  <span class="flaticon-statistics" onclick="togglePopup()"></span>
                  <p>TITLE2</p>
                    <!-- <p class="tooltiptext">Interviewing, notetaking, storytelling</p> -->
                  <div class="popup" id="popup-2">
                    <div class="overlay"></div>
                    <div class="content-pop">
                      <div class="close-btn" onclick="togglePopup()">&times;</div>
                      <h1>Title2</h1>
                      <p>example2</p>
                    </div>
                  </div>
                </div>

标签： javascripthtmljquerycss

解决方案

最初您的问题是重复的 ID。但是，在更改它们之后，问题变成了两个不同功能的名称相同。

最简单的解决方案是将要打开的 ID 传递给函数：

出于测试目的，我删除了所有 CSS，因为弹出窗口没有正确对齐。

在我的示例中，单词 OPEN 是您的打开图标。它的工作原理相同，只是没有图标。

function togglePopup(id){
  document.getElementById(id).classList.toggle("active");
}
.popup{display:none;}
.active{display:block;}
  <div class="icon-inner">
                  <span class="flaticon-statistics" onclick="togglePopup('popup-1')">OPEN</span>
                  <p>TITLE1</p>
                    <!-- <p class="tooltiptext">Interviewing, notetaking, storytelling</p> -->
                  <div class="popup" id="popup-1">
                    <div class="overlay"></div>
                    <div class="content-pop">
                      <div class="close-btn" onclick="togglePopup('popup-1')">&times;</div>
                      <h1>Title1</h1>
                      <p>example1</p>
                    </div>
                  </div>
                </div>
  <div class="icon-inner">
                  <span class="flaticon-statistics" onclick="togglePopup('popup-2')">OPEN</span>
                  <p>TITLE2</p>
                    <!-- <p class="tooltiptext">Interviewing, notetaking, storytelling</p> -->
                  <div class="popup" id="popup-2">
                    <div class="overlay"></div>
                    <div class="content-pop">
                      <div class="close-btn" onclick="togglePopup('popup-2')">&times;</div>
                      <h1>Title2</h1>
                      <p>example2</p>
                    </div>
                  </div>
                </div>

推荐阅读