Question

我有一个代码，当用户点击链接时会打开灯箱。它的作用是打开灯箱，然后当用户点击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';
            }
    }

当用户第二次点击链接时，如何再次打开此灯箱？

Answer 1

您在关闭时将style设置为display:none，但点击该链接不会更改display属性。效果：盒子保持不可见。

简单的解决方案：在开场功能中添加display:block或其他任何需要的内容。

此外：您的开场功能将创建一个新元素每个时间执行。您可以添加测试以防止：

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

Answer 2

问题在于，只要通过添加或替换document.body.innerHTML来编辑DOM，元素（您的href）上的事件就不再存在。在执行document.body.innerHTML后，您需要再次附加事件。

在javascript代码中出现问题。灯箱第二次不开

2 个答案: