javascript代码有问题.灯箱没有第二次打开

Having issue in javascript code. light box does not open second time

本文关键字：第二次 代码 有问题 javascript      更新时间：2023-09-26

我有一个代码打开灯箱时，用户点击一个链接。它所做的是打开灯箱，然后当用户点击overlay时，它关闭或隐藏覆盖和灯箱。但是当用户再次点击链接再次打开灯箱时，它不会打开。这是我的代码

var el = document.getElementById('element');
            var body = document.getElementsByTagName('body');
            el.innerHTML = '<p><a id="clickme" href="#">Click me</a></p>';
            document.getElementById('clickme').onclick = function (e) {
                e.preventDefault();
                if (overlay) {
                overlay.style.display = 'block';
            } else {
                document.body.innerHTML = '<div id="overlay" style="display:block;position:absolute;width:100%;height:100%;opacity:0.3;z-index:100;background:#000;"></div>'+document.body.innerHTML;                   
            }
                document.body.innerHTML = '<iframe id="frame" style="position:absolute;display:block;z-index:101;width:50%;height:50%;margin:10% 20%;border:10px solid #ccc;border-radius:10px;" src="http://www.example.com/"></iframe>'+document.body.innerHTML;
                document.getElementById('overlay').onclick = function() {
                document.getElementById('overlay').style.display = 'none';
                    document.getElementById('frame').style.display = 'none';
            }
    }

当用户第二次点击链接时，我如何再次打开这个灯箱?

您将style设置为display:none关闭，但单击链接不会改变display属性。效果:盒子保持不可见

简单的解决方案:在开始函数中添加display:block或任何你需要的东西。

另外:每次执行时，你的开始函数将创建一个新的元素。您可以添加一个测试来防止这种情况:

var overlay = document.getElementById('overlay');
if(overlay){
    overlay.style.display = 'block';
} else {
    //create box
}

问题是，只要您通过添加或替换document.body编辑DOM。innerHTML，元素上的事件(你的a href)将不再存在。您需要在执行document.body.innerHTML.

之后再次追加事件。
相关文章：