开发者问题收集

点击时不会打开模态框

2021-06-30
157
javascript html css

我编写了一个脚本，当您单击较小的图像时，该脚本会在模式框中打开一个放大的图像，但出于某种原因，当我尝试单击小图像时，模式框不会打开。我的网站使用 bootstrap，但我编写了自己的 CSS 来创建模式，因为 bootstrap 没有提供我想要的内容。

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

Uncaught TypeError: Cannot read property 'addEventListener' of null

这是 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';
});
3个回答

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

2021-06-30

您设置 

.bgmd {
  display: none !important;
}

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

matt
2021-06-30

在您链接的 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>
biberman
2021-06-30