模态框不会在点击时打开

Question

我编写了一个脚本，当您单击较小的图像时，它会在模态框中打开放大的图像，但由于某种原因，当我尝试单击小图像时，模态框没有打开。我的网站使用引导程序，但我已经编写了自己的 CSS 来创建模式，因为引导程序没有为我提供我想要的。

我在 Chrome 中打开了我的检查器，但我的 JavaScript 出错了

未捕获的类型错误：无法读取 null 的属性“addEventListener”

这是在 javascript 的第 1 行

HTML&PHP

<div class="bgmd">
    <div class="ctmod">
        <div class="xbutton">&times</div>
        <?php
            echo "<img src='images/car22.jpg'/>";//Large Image
        ?>
    </div>
</div>
<?php
echo "<a href='#' id='big'><img src='images/car".$id.".jpg' class='img-thumbnail center-block'/></a>";//Smaller Image

CSS

.bgmd{
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(0, 0, 0, 0.7) !important;
    position: absolute !important;
    top: 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    display: none !important;
}
.ctmod{
    width: 500px !important;
    height: 300px !important;
    background-color: white !important;
    border-radius: 4px !important;
    text-align: center !important;
    position: relative !important;
}
.xbutton{
    position: absolute !important;
    top: 0 !important;
    right: 14px !important;
    font-size: 42px !important;
    transform: rotate(45deg) !important;
    cursor: pointer !important;
}

JAVASCRIPT

document.getElementById('big').addEventListener('click', function() {
    document.querySelector('.bgmd').style.display = 'flex';
});

document.querySelector('.xbutton').addEventListener('click', function() {
    document.querySelector('.bgmd').style.display = 'none';
});

Answer 1

您有两次影响同一元素的 display 属性，这是冲突的，您应该只有 display: none; 而没有 !important 规则。此外，您还有过多的 !important 规则，仅当您想要覆盖其他样式（通常是无法直接编辑的样式）时才需要它们

Answer 2

你设置

.bgmd {
  display: none !important;
}

覆盖将模式的样式设置为display: flex。

Answer 3

在您链接的 HTML 输出中，有多个 ID 为 big 的元素。这是无效的，因此您会收到错误消息。您应该确保您只有唯一的 ID，然后您的代码才能正常工作。

此外：请检查像 display 这样的双重定义，如果真的有必要使用这么多 !important 语句。

---

如果您有多个这样的元素，则必须循环遍历 #big... 图像。要选择 ID 以 big 开头的所有元素，您可以使用属性选择器：

var img_triggers = document.querySelectorAll('a[id^="big"]');

要设置关联div.bgmd 的样式，您可以选择单击锚点的前一个元素：

this.previousElementSibling.style.display = 'flex';

要通过.xbutton 关闭，您还必须遍历所有这些按钮并为其祖父设置样式（即关联的div.bgmd）：

this.previousElementSibling.style.display = 'flex';

工作示例：（为演示而缩小，带有一些虚拟数据，没有!important）

var img_triggers = document.querySelectorAll('a[id^="big"]');
for (let i = 0; i < img_triggers.length; i++) {
  img_triggers[i].addEventListener('click', function() {
    this.previousElementSibling.style.display = 'flex';
  });
}

var buttons = document.querySelectorAll('.xbutton');
for (let i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener('click', function() {
    this.parentElement.parentElement.style.display = 'none';
  });
}

.bgmd {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  position: absolute;
  top: 0;
  justify-content: center;
  align-items: center;
  display: none;
}

.ctmod {
  width: 250px;
  height: 150px;
  background-color: white;
  border-radius: 4px;
  text-align: center;
  position: relative;
}

.xbutton {
  position: absolute;
  top: 0;
  right: 14px;
  font-size: 42px;
  transform: rotate(45deg);
  cursor: pointer;
}

<div class="bgmd">
  <div class="ctmod">
    <div class="xbutton">&times</div>
    <img src='https://picsum.photos/id/1/150' />
  </div>
</div>
<a href='#' id='big1'>
  <img src='https://picsum.photos/id/1/50' class='img-thumbnail center-block' />
</a>

<div class="bgmd">
  <div class="ctmod">
    <div class="xbutton">&times</div>
    <img src='https://picsum.photos/id/2/150' />
  </div>
</div>
<a href='#' id='big2'>
  <img src='https://picsum.photos/id/2/50' class='img-thumbnail center-block' />
</a>

<div class="bgmd">
  <div class="ctmod">
    <div class="xbutton">&times</div>
    <img src='https://picsum.photos/id/3/150' />
  </div>
</div>
<a href='#' id='big3'>
  <img src='https://picsum.photos/id/3/50' class='img-thumbnail center-block' />
</a>