我试图制作一个模型，当满足条件时，它会出现在屏幕上（在我的情况下是广告拦截器）。模型大多有效。

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

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

***请注意，下面的代码需要打开adblocker才能工作***

图像:

页面加载

---

首次单击选项卡后

---

与页面上的其他内容一起

编辑:

一个答案之后，一切原本就固定了！现在方框没有居中。有没有办法将弹出窗口居中，并在其后面放置一个浅灰色（这样原始页面内容更多地放在背景中）？

下面是我的代码:

---

顺晟科技：

问题1 您的标签具有默认样式（因为这是标签的默认显示），所以它们在页面加载时是可见的。您的Javascript函数设置了所有未选择的选项卡，因此在用户单击选项卡后，一切都正常了。

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

CSS

// 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";
}

HTML

// 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";
}

问题2 这个问题的图像链接被破坏了，但我猜这就是问题所在。在CSS中，尝试将for的位置更改为。

第一次打开模式时，将显示所有div。

单击任一选项卡后，将隐藏所有选项卡()，并取消隐藏选定的选项卡（）。一个快速解决方案是在打开模式后选择第一个模式:

// 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";
}

---

作为附带说明，您可能需要考虑以下改进:

• 您可能希望使用classlistapi:(///).
• 我还建议放弃通过JS应用内联样式，而只添加/删除类。这为您提供了额外的灵活性（例如：您可以在以后快速添加转换，而不必为此编写任何额外的JS或修改标记）。
• 另一个显著的改进是将处理程序替换为单个处理程序，该处理程序绑定在所有按钮的父级上，并根据当前按钮的选项卡选择正确的选项卡。

查看:

注意我放在和放在。现在所需要的就是从any中移除类，并将其添加到我要打开的类中。同样的原则也适用于按钮。

还可以改进CSS。

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