Question

我希望能够在用户点击“是”时关闭/隐藏此div。单击否时会执行此操作，单击是时，我无法确定如何执行此操作。

<script type="text/javascript">    
var sg_div = document.createElement("div"); sg_div.innerHTML = "<h2>Welcome!</h2>Your opinion is important to us. After your visit, would you be willing to answer a few questions?
<p><center><a href=\"http://stackoverflow.com/questions/ask" 
onclick=\"window.open(this.href,'_self');window.open('#','_blank');\">
<button>Yes</button></a> &nbsp;&nbsp; <a href=\"#\" onclick=\"document.getElementById('sg-popup').style.display = 'none';return false;\">
<button>No, thank you.</button></a> "; sg_div.id = "sg-popup"; sg_div.style.position = "absolute"; 
sg_div.style.width = "350px"; sg_div.style.top = "600px"; sg_div.style.left = "400px"; sg_div.style.backgroundColor = "#ffffff"; 
sg_div.style.borderColor = "#888888"; sg_div.style.borderStyle = "double"; sg_div.style.padding = "10px"; 
sg_div.style.fontSize = "16px"; document.body.appendChild(sg_div);</script>

Answer 1

<a href=\"http://stackoverflow.com/questions/ask\" onclick=\"window.open(this.href,'_self');window.open('#','_blank');\"><button>Yes</button></a>

应该是

<a href=\"http://stackoverflow.com/questions/ask\" onclick=\"document.getElementById('sg-popup').style.display = 'none';window.open(this.href,'_self');window.open('#','_blank');\"><button>Yes</button></a>

您在“否”锚点的点击事件上调用document.getElementById（'sg-popup'）。style.display ='none'，但不在yes上。

Answer 2

首先，你没有在标签的结尾处转义引号。 href=\"http://stackoverflow.com/questions/ask" - ＆gt; href=\"http://stackoverflow.com/questions/ask\"

接下来，隐藏sg-popup的onclick函数仅在包含你的＆＃34; No＆＃34;的锚标记上。按钮。如果你喜欢＆＃34;是＆＃34;按钮，您必须将document.getElementById('sg-popup').style.display = 'none';添加到包含您的＆＃34;是＆＃34;的锚标记的onclick属性中。按钮。

Answer 3

你根本就没有为onclick添加任何逻辑“是”，就像你有“No”一样。我已经展示了如何执行此操作的示例（还提供了隐藏功能以减少重复代码。我还进行了更改以显着提高代码的可读性并修复您的引用转义问题。

<script type="text/javascript">    
var sg_div = document.createElement("div");
sg_div.innerHTML = '<h2>Welcome!</h2>Your opinion is important to us.' +
    ' After your visit, would you be willing to answer a few questions?' +
    '<p><center>' + 
    '<a href="http://stackoverflow.com/questions/ask"' +
    ' onclick="hideById(\'sg-popup\');window.open(this.href,\'_self\');' +
    'window.open(\'#\',\'_blank\');">' +
    '<button>Yes</button></a>' +
    '&nbsp;&nbsp;' +
    '<a href="#" onclick="hideById(\'sg-popup\');return false;">' +
    '<button>No, thank you.</button></a>';
sg_div.id = "sg-popup";
sg_div.style.position = "absolute"; 
sg_div.style.width = "350px";
sg_div.style.top = "600px";
sg_div.style.left = "400px";
sg_div.style.backgroundColor = "#ffffff"; 
sg_div.style.borderColor = "#888888";
sg_div.style.borderStyle = "double";
sg_div.style.padding = "10px"; 
sg_div.style.fontSize = "16px";
// new function to hide an element given id
document.body.appendChild(sg_div);
function hideById(id) {
    document.getElementById(id).style.display = 'none';
}    
</script>

看起来您还需要关闭您创建的<p>标记（我没有显示此更改，因为我不确定您是否需要遵守某些古老的HTML标准。

我想在用户单击“是”时关闭/隐藏此div

3 个答案: