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

Question

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

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

当框第一次出现在页面上时，所有框都排在它下面（运行代码或查看下图了解我的意思），但是，问题在之后得到解决选择了一个选项卡。
如果页面上有其他文本或内容，该框将被推到所有文本或内容下方。尽管设置了 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>

Answer 1

首次打开模式时，会显示所有 .tabContent 个 div。

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

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

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

而不是操纵 className 字符串（这既麻烦又容易出错），您可能想要使用 classList API：(.add()/.remove()/.toggle()/.replace()).
我还建议放弃通过 JS 仅使用 adding/removing classes 应用内联样式。这为您提供了额外的灵活性（例如：您可以稍后快速添加转换，而无需为此编写任何额外的 JS 或修改标记）。
另一个重大改进是用单个处理程序替换 onclick 处理程序，在所有按钮的父级上绑定 addEventListener，并根据 select 调整正确的选项卡当前按钮的 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 class 并将其添加到我要打开的那个。同样的原则也适用于按钮。

您的 CSS 还可以改进。

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

Answer 2

问题一
您的标签 <div id="..." class="tabcontent">...</div> 具有默认样式 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>

问题二
此问题的图像 link 已损坏，但我猜测问题出在 position:relative 上。在您的 CSS 中，尝试将 #myModal 的位置更改为 position:absolute。

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

JS CSS and HTML Pop Up Modal Display Error

html

javascript

css

popup

页面加载时

第一次点击标签后

与页面上的其他内容