0

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

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

4

2 回答 2

1

您设置style为display:none关闭，但单击链接不会更改display属性。效果：盒子保持隐形。

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

另外：您的打开函数每次执行时都会创建一个新元素。您可以添加一个测试来防止这种情况：

var overlay = document.getElementById('overlay');
if(overlay){
    overlay.style.display = 'block';
} else {
    //create box
}
于 2013-04-01T12:40:22.287 回答
1

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

于 2013-04-01T12:57:02.023 回答