JS CSS 和 HTML 弹出模态显示错误

【问题标题】：JS CSS and HTML Pop Up Modal Display ErrorJS CSS 和 HTML 弹出模态显示错误
【发布时间】：2021-10-01 23:56:54
【问题描述】：

我正在尝试制作一个在满足条件时显示在屏幕上的模型（在我的例子中是一个广告拦截器）。该模型大部分有效。

我无法弄清楚或解决的两件事是......

  1. 当该框首次出现在页面上时，所有框都在其下方排列（运行代码或查看下图以了解我的意思），但是，在选择选项卡后问题得到解决。
  2. 如果页面上有额外的文本或内容，框会被推到所有内容的下方。尽管设置了 z-index，但它并没有像我想要的那样显示在所有其他内容的前面（我认为这与 JS 调用函数的方式有关，详见图片）。

*** 请注意，以下代码需要打开广告拦截器才能工作 *** 

// Get the modal
var modal = document.getElementById("myModal");

window.onload = function() {    if(typeof(window.google_render_ad)=="undefined"){       
modal.style.display = "block";
   }
}

function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}
body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box}

/* Modal Content */
#myModal {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  border: 1px solid #888;
  width: 80%;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s
}

/* Add Animation */
@-webkit-keyframes animatetop {
  from {top:-300px; opacity:0} 
  to {top:0; opacity:1}
}

@keyframes animatetop {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}

.modal-header {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}

.modal-body {padding: 2px 16px;}

.modal-footer {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Style the tab */
.tab {
  float: left;
  border-top: 2px solid #ccc;
  background-color: #f1f1f1;
  width: 30%;
  height: 300px;
}

/* Style the buttons that are used to open the tab content */
.tab button {
  display: block;
  background-color: inherit;
  color: black;
  padding: 22px 16px;
  width: 100%;
  border: none;
  outline: none;
  text-align: left;
  cursor: pointer;
  transition: 0.3s;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
  border-radius: 5px;
}

/* Create an active/current "tab button" class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  float: left;
  padding: 0px 12px;
  border-top: 1px solid #ccc;
  width: 70%;
  height: 300px;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<h2>Animated Modal with Header and Footer</h2>

<!-- The Modal -->
<div id="myModal" class="modal">

 <h2>Vertical Tabs</h2>
<p>Click on the buttons inside the tabbed menu:</p>

  <!-- Modal content -->
    <p>Some text in the Modal..</p>

<div class="tab">
  <button class="tablinks" onclick="openCity(event, 'one')" id="defaultOpen">number 1</button>
  <button class="tablinks" onclick="openCity(event, 'two')">Number 2</button>
  <button class="tablinks" onclick="openCity(event, 'three')">number 3</button>
    <button class="tablinks" onclick="openCity(event, 'four')">number 4</button>
    <button class="tablinks" onclick="openCity(event, 'five')">number 5</button>
     <button class="tablinks" onclick="openCity(event, 'six')">number 6</button>
    <button class="tablinks" onclick="openCity(event, 'seven')">number 7</button>
     <button class="tablinks" onclick="openCity(event, 'eight')">number 8</button>
</div>

<div id="one" class="tabcontent">
  <h3>one</h3>
  <p>London is the capital city of England.</p>
</div>

<div id="two" class="tabcontent">
  <h3>two</h3>
  <p>Paris is the capital of France.</p> 
</div>

<div id="three" class="tabcontent">
  <h3>three</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>

<div id="four" class="tabcontent">
  <h3>four</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>

<div id="five" class="tabcontent">
  <h3>five</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>

<div id="six" class="tabcontent">
  <h3>six</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>

<div id="seven" class="tabcontent">
  <h3>seven</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>

<div id="eight" class="tabcontent">
  <h3>eight</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>


</div>

</body>
</html>

图片：

页面加载


第一次点击标签后


与页面上的其他内容

编辑：

一个答案后，原来的一切都是固定的！现在盒子没有居中。有没有什么办法让弹窗居中，并在其后面放置一个浅灰色（所以原来的页面内容更多在后台）？

这是我现在的代码：

var modal = document.getElementById("myModal");

window.onload = function() {
  if (typeof(window.google_render_ad) == "undefined") {
    modal.style.display = "block";
    document.getElementById('defaultOpen')?.click();
  }
}

function openCity(evt, cityName) {
  document.querySelector('.tabcontent.open')?.classList.remove('open');
  document.getElementById(cityName).classList.add('open')

  document.querySelector('.tablinks.active')?.classList.remove('active');
  evt.currentTarget.classList.add('active');
}
body {
  font-family: Arial, Helvetica, sans-serif;
}

* {
  box-sizing: border-box
}


/* Modal Content */

#myModal {
  position: absolute;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  border: 1px solid #888;
  width: 80%;
  height:auto;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s
}


/* Add Animation */

@-webkit-keyframes animatetop {
  from {
    top: -300px;
    opacity: 0
  }
  to {
    top: 0;
    opacity: 1
  }
}

@keyframes animatetop {
  from {
    top: -300px;
    opacity: 0
  }
  to {
    top: 0;
    opacity: 1
  }
}

.modal-header {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}

.modal-body {
  padding: 2px 16px;
}

.modal-footer {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}


/* The Modal (background) */

.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
}


/* Style the tab */

.tab {
  float: left;
  border-top: 2px solid #ccc;
  background-color: #f1f1f1;
  width: 30%;
  height: 300px;
}


/* Style the buttons that are used to open the tab content */

.tab button {
  display: block;
  background-color: inherit;
  color: black;
  padding: 22px 16px;
  width: 100%;
  border: none;
  outline: none;
  text-align: left;
  cursor: pointer;
  transition: 0.3s;
}


/* Change background color of buttons on hover */

.tab button:hover {
  background-color: #ddd;
  border-radius: 5px;
}


/* Create an active/current "tab button" class */

.tab button.active {
  background-color: #ccc;
}


/* Style the tab content */

.tabcontent {
  float: left;
  padding: 0px 12px;
  border-top: 1px solid #ccc;
  width: 70%;
  height: 300px;
  display: none; /* this hides all tabs */
}
.tabcontent.open {
  display: block; /* show current tab */
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<h2>dtnhdrtytntnntfyndtmntfnytnrtbdrtbAnimated Modal with Header and Footer</h2>
<h2>tdrnbtrrdtrdtbtbdtdnbdrntdAnimated Modal with Header and Footer</h2>
<h2>tndrntbtdbtrdtdrbfntyftnrgbAnimated Modal with Header and Footer</h2>
<h2>tbtryfbdtbyrdbfnyfnynydbrdbAnimated Modal with Header and Footer</h2>
<h2>dtnhdrtytntnntfyndtmntfnytnrtbdrtbAnimated Modal with Header and Footer</h2>
<h2>tdrnbtrrdtrdtbtbdtdnbdrntdAnimated Modal with Header and Footer</h2>
<h2>tndrntbtdbtrdtdrbfntyftnrgbAnimated Modal with Header and Footer</h2>
<h2>tbtryfbdtbyrdbfnyfnynydbrdbAnimated Modal with Header and Footer</h2>
<h2>dtnhdrtytntnntfyndtmntfnytnrtbdrtbAnimated Modal with Header and Footer</h2>
<h2>tdrnbtrrdtrdtbtbdtdnbdrntdAnimated Modal with Header and Footer</h2>
<h2>tndrntbtdbtrdtdrbfntyftnrgbAnimated Modal with Header and Footer</h2>
<h2>tbtryfbdtbyrdbfnyfnynydbrdbAnimated Modal with Header and Footer</h2>
<h2>dtnhdrtytntnntfyndtmntfnytnrtbdrtbAnimated Modal with Header and Footer</h2>
<h2>tdrnbtrrdtrdtbtbdtdnbdrntdAnimated Modal with Header and Footer</h2>
<h2>tndrntbtdbtrdtdrbfntyftnrgbAnimated Modal with Header and Footer</h2>
<h2>tbtryfbdtbyrdbfnyfnynydbrdbAnimated Modal with Header and Footer</h2>


<!-- The Modal -->
<div id="myModal" class="modal">

 <h2>Vertical Tabs</h2>
<p>Click on the buttons inside the tabbed menu:</p>

  <!-- Modal content -->
    <p>Some text in the Modal..</p>

<div class="tab">
  <button class="tablinks" onclick="openCity(event, 'one')" id="defaultOpen">number 1</button>
  <button class="tablinks" onclick="openCity(event, 'two')">Number 2</button>
  <button class="tablinks" onclick="openCity(event, 'three')">number 3</button>
    <button class="tablinks" onclick="openCity(event, 'four')">number 4</button>
    <button class="tablinks" onclick="openCity(event, 'five')">number 5</button>
     <button class="tablinks" onclick="openCity(event, 'six')">number 6</button>
    <button class="tablinks" onclick="openCity(event, 'seven')">number 7</button>
     <button class="tablinks" onclick="openCity(event, 'eight')">number 8</button>
</div>

<div id="one" class="tabcontent">
  <h3>one</h3>
  <p>London is the capital city of England.</p>
</div>

<div id="two" class="tabcontent">
  <h3>two</h3>
  <p>Paris is the capital of France.</p> 
</div>

<div id="three" class="tabcontent">
  <h3>three</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>

<div id="four" class="tabcontent">
  <h3>four</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>

<div id="five" class="tabcontent">
  <h3>five</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>

<div id="six" class="tabcontent">
  <h3>six</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>

<div id="seven" class="tabcontent">
  <h3>seven</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>

<div id="eight" class="tabcontent">
  <h3>eight</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>


</div>


</body>
</html>

【问题讨论】：

    标签： javascript html css popup


    【解决方案1】：

    第一次打开模态框时，会显示所有.tabContent div。

    单击任何选项卡后，您将隐藏所有选项卡 (display: none) 并取消隐藏选定的选项卡 (display: block)。一个快速的解决方法是在您刚刚打开模式后选择第一个：

    window.onload = function() {
  if(typeof(window.google_render_ad)=="undefined"){
    modal.style.display = "block";
    document.querySelector('#defaultOpen').click();
  }
}

    作为旁注，您可能需要考虑以下改进：

    • 您可能想要使用classList API：(.add()/.remove()/.toggle()/.replace())，而不是操作className 字符串。
    • 我还建议放弃通过 JS 应用内联样式，而只需添加/删除类。这为您提供了额外的灵活性（例如：您可以稍后快速添加过渡，而无需编写任何额外的 JS 或修改标记）。
    • 另一个重大改进是将onclick 处理程序替换为单个处理程序，与所有按钮的父级上的addEventListener 绑定，并根据当前按钮的index 选择正确的选项卡。

    看看：

    // Get the modal
var modal = document.getElementById("myModal");

window.onload = function() {
  document.querySelector('.tab').addEventListener('click', openCity);
  if (typeof(window.google_render_ad) == "undefined") {
    modal.style.display = "block";
    document.getElementById('defaultOpen')?.click();
  }
}

function openCity(evt) {
  document.querySelector('.tabcontent.open')?.classList.remove('open');
  document.querySelector('.tablinks.active')?.classList.remove('active');
  const btn = evt.target.closest('.tablinks');
  if (btn) {
    btn.classList.add('active');
    const index = [...btn.parentElement.children].indexOf(btn);
    document.querySelector('.tabs-container').children[index].classList.add('open');
  }
}
    body {
  font-family: Arial, Helvetica, sans-serif;
}

* {
  box-sizing: border-box
}


/* Modal Content */

#myModal {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  border: 1px solid #888;
  width: 80%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s
}


/* Add Animation */

@-webkit-keyframes animatetop {
  from {
    top: -300px;
    opacity: 0
  }
  to {
    top: 0;
    opacity: 1
  }
}

@keyframes animatetop {
  from {
    top: -300px;
    opacity: 0
  }
  to {
    top: 0;
    opacity: 1
  }
}

.modal-header {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}

.modal-body {
  padding: 2px 16px;
}

.modal-footer {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}


/* The Modal (background) */

.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
}


/* Style the tab */

.tab {
  float: left;
  border-top: 2px solid #ccc;
  background-color: #f1f1f1;
  width: 30%;
  height: 300px;
}


/* Style the buttons that are used to open the tab content */

.tab button {
  display: block;
  background-color: inherit;
  color: black;
  padding: 22px 16px;
  width: 100%;
  border: none;
  outline: none;
  text-align: left;
  cursor: pointer;
  transition: 0.3s;
}


/* Change background color of buttons on hover */

.tab button:hover {
  background-color: #ddd;
  border-radius: 5px;
}


/* Create an active/current "tab button" class */

.tab button.active {
  background-color: #ccc;
}


/* Style the tab content */

.tabcontent {
  float: left;
  padding: 0px 12px;
  border-top: 1px solid #ccc;
  width: 70%;
  height: 300px;
  display: none; /* this hides all tabs */
}
.tabcontent.open {
  display: block; /* show current tab */
}
    <!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>

  <h2>Animated Modal with Header and Footer</h2>

  <!-- The Modal -->
  <div id="myModal" class="modal">

    <h2>Vertical Tabs</h2>
    <p>Click on the buttons inside the tabbed menu:</p>

    <!-- Modal content -->
    <p>Some text in the Modal..</p>

    <div class="tab">
      <button class="tablinks" id="defaultOpen">number 1</button>
      <button class="tablinks">Number 2</button>
      <button class="tablinks">number 3</button>
      <button class="tablinks">number 4</button>
      <button class="tablinks">number 5</button>
      <button class="tablinks">number 6</button>
      <button class="tablinks">number 7</button>
      <button class="tablinks">number 8</button>
    </div>
    <div class="tabs-container">
      <div class="tabcontent">
        <h3>one</h3>
        <p>London is the capital city of England.</p>
      </div>

      <div class="tabcontent">
        <h3>two</h3>
        <p>Paris is the capital of France.</p>
      </div>

      <div class="tabcontent">
        <h3>three</h3>
        <p>Tokyo is the capital of Japan.</p>
      </div>

      <div class="tabcontent">
        <h3>four</h3>
        <p>Tokyo is the capital of Japan.</p>
      </div>

      <div class="tabcontent">
        <h3>five</h3>
        <p>Tokyo is the capital of Japan.</p>
      </div>

      <div class="tabcontent">
        <h3>six</h3>
        <p>Tokyo is the capital of Japan.</p>
      </div>

      <div class="tabcontent">
        <h3>seven</h3>
        <p>Tokyo is the capital of Japan.</p>
      </div>

      <div class="tabcontent">
        <h3>eight</h3>
        <p>Tokyo is the capital of Japan.</p>
      </div>
    </div>


  </div>

</body>

</html>

    注意我把display: none放在.tabcontent上，display: block放在.tabcontent.open上。现在所需要做的就是从任何.tabcontent.open 中删除open 类并将其添加到我要打开的类中。同样的原理也适用于按钮。

    您的 CSS 也可以改进。

    但是，所有这些建议都超出了当前问题的范围。

    【讨论】：

    • @Green，如果我回答了你的第二个问题，我将违反Stack Overflow 的准则。你不能用你的下一个问题代替这个问题，你必须问另一个问题。如果每个人都用另一个问题代替他们回答的问题，Stack Overflow 将不再有帮助。我的回答应该可以帮助您，但也可以帮助其他有相同类型问题的人。这就是为什么您需要单独提出新问题。要使模态框居中，您必须将其放置在 position: fixed 容器中，调整容器的大小以匹配视口，并使用 flexbox 使模态框在其中垂直和水平居中
    • 模态容器也可以用作背景，在模态打开时覆盖页面并停止与它的交互（也可以用作单击-cather，以在单击外部时关闭模态） .另请注意，您还应该防止&lt;body&gt; 在模式打开时滚动。当您完成所有这些操作后，您可能会发现它不适用于所有浏览器和所有设备。这就是为什么许多人发现组件库（例如 Bootstrap）很有用。 :)
    【解决方案2】：

    问题 1
    您的标签&lt;div id="..." class="tabcontent"&gt;...&lt;/div&gt; 的默认样式为display:block（因为这是div 标签的默认显示），因此它们在页面加载时可见。您的 Javascript 函数 openCity() 为所有未选择的选项卡设置了 display:none，因此在用户单击选项卡后一切正常。

    有多种方法可以解决这个问题，但最简单的可能是在 CSS tabcontent 定义中添加 display:none; 行，然后为您的第一个项目添加一个覆盖该行的内联样式（假设您希望显示第一个选项卡在页面加载时）：

    CSS

    .tabcontent {
  ...  
  display:none;  
}

    HTML

    ...
<div id="one" class="tabcontent" style="display:block"> 
  ...
</div>

    问题 2
    此问题的图像链接已损坏，但我猜这是position:relative 的问题。在您的 CSS 中尝试将 #myModal 的位置更改为 position:absolute。

    【讨论】：

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2014-12-23
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2016-11-19
      • 1970-01-01
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode