当"显示"从"无"设置为"块"时，"分割"

我正在尝试制作一个弹出窗口，当用户完成某项任务时会出现。这个弹出窗口应该包含一个链接，说关闭(允许他们关闭弹出窗口(每当它出现。我的问题是，当显示从"无"设置为"阻止"时，链接不会显示，尽管它在分区内。

function closePopup() {
document.getElementById("popup").style.display = "none";
}
function openPopup() {
document.getElementById("popup").style.display = "block";
document.getElementById('popup').innerHTML = 'This is the popup';
}

#popup {
display: none;
padding: 1.5% 0 1.5% 0;
background-color: #afcb59;
width: 40%;
}

<body>
<div id="popup">
<a href="#" onclick="closePopup()">Close</a>
<p></p>
</div>
<a href="#" onclick="openPopup()">Open</a>
</body>

您需要将innerHTML添加到该段落，而不是div。

function closePopup() {
document.getElementById("popup").style.display = "none";
}
function openPopup() {
document.getElementById("popup").style.display = "block";
document.getElementById('text').innerHTML = 'This is the popup';
}

#popup {
display: none;
padding: 1.5% 0 1.5% 0;
background-color: #afcb59;
width: 40%;
}

<body>
<div id="popup">
<a href="#" onclick="closePopup()">Close</a>
<p id="text"></p>
</div>
<a href="#" onclick="openPopup()">Open</a>
</body>

function closePopup() {
document.getElementById("popup").style.display = "none";
document.getElementById("open_popup").style.display = "block";
}
function openPopup() {
document.getElementById("popup").style.display = "block";
document.getElementById("open_popup").style.display = "none";
document.getElementById('popup_text').innerHTML = 'This is the popup';
}

#popup {
display: none;
padding: 1.5% 0 1.5% 0;
background-color: #afcb59;
width: 40%;
}

<body>
<div id="popup">
<p id="popup_text"></p>
<a href="#" onclick="closePopup()">Close</a>
</div>
<a id="open_popup" href="#" onclick="openPopup()">Open</a>
</body>

我对你的脚本做了一点修改，在closePopup函数中又添加了两个功能，在openPopup函数也添加了同样的功能，还更新了body标记，以根据你的需求反映变化。

function closePopup() {
document.getElementById("popup").style.display = "none";
document.getElementById("closepoup").style.display = "block";
document.getElementById('closepoup').innerHTML = '  <a href="#" onclick="openPopup()">Open</a>';
}
function openPopup() {
document.getElementById("popup").style.display = "block";
document.getElementById('popup').innerHTML = '  This is the popup';
document.getElementById('closepoup').innerHTML = '  <a href="#" onclick="closePopup()">Close</a>';     
}

#popup {
display: none;
padding: 1.5% 0 1.5% 0;
background-color: #afcb59;
width: 40%;
}

<body>
<div id="closepoup">
<a href="#" onclick="openPopup()">Open</a>
</div>
<div id="popup"></div>

</body>

相关内容

最新更新

热门标签：