Question

我想“关闭”一个模态窗口。这是一个wordpress模板，它很难看...... 我有一个div：

<div class="modal">
    <section style="position:relative;z-index:10;">
        <div style="margin-bottom: -50px; margin-right: 50px; text-align: right;">
            <img src="./wp-content/img.png" alt="Close">
        </div>
        <p><img src="./wp-content/img2.png" alt="test"></p>
    </section>
</div>

当单击带有alt="Close"的img时，我想关闭或将所有div.modal的不透明度设置为0.是否可以使用JS？

Answer 1

的jQuery -

$('img[alt*=Close]').click(function() {
    $('.modal').hide();
});

JS -

var img = document.querySelector('img[alt*=Close]'),
       modal = document.querySelector('.modal');
img.addEventListener('click', function() {
    modal.style.display = 'none';
});

Answer 2

点击带有alt="Close"的img后，我想关闭或将所有opacity的{{1}}设置为0。

绝对！

首先我要提一下，有一些属性选择器现在在css3中正式可用，因此可以用作jQuery选择器，如：

div.modal

如果您的模态是动态创建的，那么您必须遵循事件委派技术，其语法如下：

$('body').on('click', 'img[alt="Close"]', function(e){
    $(this).closest('.modal').fadeOut(); // to fade out the entire div.
    // $(this).closest('.modal').hide(); // hide will hide the modal
});

Answer 3

您可以使用以下方式侦听img div上的点击事件：

document.querySelector("img[alt=Close]").addEventListener("click", yourHandler);

然而，使用其alt属性访问图片看起来很糟糕。 alt是为用户显示信息提示和辅助功能消息，而不是标识DOM元素。如果你能给这个图像一个id或一个类，那就更好了：

document.getElementById("yourImgId").addEventListener("click", yourHandler);

然后：

var modal = document.querySelector(".modal");

function yourHandler(){
   modal.style.opacity = 0;
}

或

function yourHandler(){
   modal.style.display = "none";
}

最后一个解决方案是在样式表中定义样式属性，如：

.modal.disabled {
    display: none;
}

然后将该类添加到modal以禁用它。

function yourHandler(){
    modal.classList.add("disabled");
}

最后一个解决方案更灵活，更易于维护，因为它将逻辑与样式分开。

Answer 4

是的！只需设置css属性opacity

即可

$(".modal").css({ opacity: 0.5 });

使用js或关闭模态窗口设置不透明度

4 个答案: