关闭图标不出现答案

【问题标题】：close icon doesn't appear关闭图标不出现
【发布时间】：2014-02-24 08:43:27
【问题描述】：

我试图在我的页面上添加一个文本弹出框，这段代码帮助了我，但我需要添加一个关闭图标（这是我的代码中的一个图像）..

但它不起作用：/

这是我的代码：

function show_hide_box(an, width, height, borderStyle) {

if (navigator.userAgent.indexOf("MSIE") != -1) {
    var browserIsIE = true;
} else { browserIsIE = false; }


var href = an.href;
var boxdiv = document.getElementById(href);

if (boxdiv != null) {
if (boxdiv.style.display=='none') {
  move_box(an, boxdiv);
  boxdiv.style.display='block';
} else
  boxdiv.style.display='none';
return false;
}

boxdiv = document.createElement('div');
boxdiv.setAttribute('id', href);
boxdiv.style.display = 'block';
boxdiv.style.position = 'absolute';
boxdiv.style.width = width + 'px';
boxdiv.style.height = height + 'px';
boxdiv.style.border = borderStyle;
boxdiv.style.backgroundColor = '#FFF';

var inClosebox = document.createElement("div");
inClosebox.setAttribute('id', 'Close');
inClosebox.style.position = 'absolute';

if (browserIsIE) {
  inClosebox.style.left = '-1px';
  inClosebox.style.top = '0px';
} else {
  inClosebox.style.left = '-15px';
  inClosebox.style.top = '-15px';
}

inClosebox.style.visibility = 'hidden';

var inImage2 = document.createElement("img");
inImage2.onclick = function () { this.document.close(); };
inImage2.setAttribute('src', '../../Images/closebox.png');
inImage2.setAttribute('width', '30');
inImage2.setAttribute('height', '30');
inImage2.setAttribute('border', '0');
inImage2.style.cursor = 'pointer';
inClosebox.appendChild(inImage2);


var contents = document.createElement('iframe');
contents.scrolling = 'yes';
contents.frameBorder = '0';
contents.style.width = width + 'px';
contents.style.height = height + 'px';
contents.src = href;

boxdiv.appendChild(contents);
boxdiv.appendChild(inClosebox);
document.body.appendChild(boxdiv);
move_box(an, boxdiv);

return false;
}

有什么可以帮帮我的吗？

【问题讨论】：

如果您使用的是 firefox，请使用 /Download Firebug 并尝试将 closebox 定位到您想要的位置，您可以在您的 css 中使用这些值
尝试在一个类中设置样式并简单地给你的元素类名
我愿意..并且确实使用萤火虫。但是代码closebox根本没有出现。我想知道我的代码是否有问题？
就像 naveen 建议的那样检查图像是否在正确的路径中
如果我想从页面中检索特定部分，我可以这样做吗？我的意思是在这部分： var href = an.href; var boxdiv = document.getElementById(href);我可以指定一个标签的 ID 来检索它吗？喜欢：var href = an.href; var boxdiv = document.getElementById(href).getElementById("显示这部分！"); ??

标签： javascript popup

【解决方案1】：

那应该是src的路径不对。即../../Images/closebox.png

将此添加到您的代码中，看看这是否有效

inImage2.setAttribute('alt', 'Close');

即使这不起作用，它也会向您表明代码有其他问题。

始终将alt 属性添加到img 标记是一个非常好的做法。

更新：

我刚看到这个inClosebox.style.visibility = 'hidden'; 您正在将img 附加到它，那么当父级隐藏时您如何使其可见？
打败我。或者你有额外的代码？如果不是，请删除该行并尝试。

【讨论】：

它在正确的道路上，是的，我忘了设置可见性！感谢 naveen 和 Ibu .. 但不幸的是，inImage2.onclick = function () { this.document.close(); };不能正常工作，点击图标后我该用什么使框关闭？
它现在可以工作了，我确实使用过：document.body.removeChild(boxdiv);谢谢大家！
我还有一个问题：$ 我已经在上面的评论部分写了。
您能否将其作为一个单独的问题发布。想要更详细一点。
当然，我做到了：stackoverflow.com/questions/6212596/…