仅在单击按钮时显示班级

Question

我有一个类弹出窗口 ，其中有两个按钮和一个您喜欢CSS的措辞，当窗口加载时会显示该CSS。

我还有另一个按钮displaypopup 。

Im trying to hide class popup and only display when button is clicked. Im trying to hide class popup and only display when button displaypopup Im trying to hide class popup and only display when button is clicked.

我创建了一个按钮displaypopup，并提供了onclick函数displaypop（）。

如何在窗口加载时最初隐藏类弹出窗口，并仅在单击按钮displaypop时显示

 function displaypopup() { } 

 body { background-image:url(18-thursday0044.gif); } p { font-size: 120%; margin-bottom: 15px; } .popup { background: #fff; background: -webkit-linear-gradient(top, #fff, #ddd); background: -moz-linear-gradient(top, #fff, #ddd); background: -ms-linear-gradient(top, #fff, #ddd); background: -o-linear-gradient(top, #fff, #ddd); background: linear-gradient(to bottom, #fff, #ddd); margin: 0 auto; top: 60vh; left: 72vw; width: 80vw; height: 30vh; text-align: center; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px; -moz-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px; box-shadow: rgba(0,0,0,0.2) 0px 1px 3px; } a.button { margin: 0 1px; padding-top:80%; padding: 6px 50px 5px; font-weight: bold; font-size: 100%; color: #fff; text-align: center; border: none; border-right: 1px solid rgba(0,0,0,.2); border-bottom: 1px solid rgba(0,0,0,.2); background: #3d7cb1; background: -webkit-linear-gradient(top, #2cb0e5, #1a7cd3); background: -moz-linear-gradient(top, #2cb0e5, #1a7cd3); background: -ms-linear-gradient(top, #2cb0e5, #1a7cd3); background: -o-linear-gradient(top, #2cb0e5, #1a7cd3); background: linear-gradient(to bottom, #2cb0e5, #1a7cd3); text-shadow: rgba(0,0,0,.25) 1px 1px 1px; -webkit-border-radius: 13px; -moz-border-radius: 13px; border-radius: 13px; text-decoration: none; } a.button:hover { background: #1e80bc; background: -webkit-linear-gradient(top, #26a0cd, #1661ab); background: -moz-linear-gradient(top, #26a0cd, #1661ab); background: -ms-linear-gradient(top, #26a0cd, #1661ab); background: -o-linear-gradient(top, #26a0cd, #1661ab); background: linear-gradient(to bottom, #26a0cd, #1661ab); } a.button:active { background: #1e80bc; } span.heart { color: #c70000; font-size: 118%; } 

 <div class="popup"> <p>Do you <span class="heart">♥</span> CSS ?</p> <a class="button" href="javascript:void(0);">No</a> <a class="button" href="javascript:void(0);">Yes</a> </div> <button onclick="displaypopup">displaypopup</button> 

Answer 1

这是您需要的：

<div class="popup" style="display: none;">
<p>Do you <span class="heart">♥</span> CSS ?</p>
<a class="button" href="javascript:void(0);">No</a>
<a class="button" href="javascript:void(0);">Yes</a>
</div>

添加显示：无； 在这里和：

 function displaypopup()
{
    var popup = document.querySelector('.popup');
     popup.style.display = 'block';
}

添加此功能，同样在按钮中您需要更正功能初始化：

<button onclick="displaypopup();">displaypopup</button>

Answer 2

您可以通过最初不将类添加到div中来实现。 而是将eventListener添加到您的按钮，然后单击按钮将class属性添加到div。

这是一个工作示例。

 let btn = document.getElementById( "btn1" ).addEventListener( "click", function(){ let yourDiv = document.getElementById( "test" ); yourDiv.setAttribute( "class", "popup" ); }); 

 body { background-image:url(18-thursday0044.gif); } p { font-size: 120%; margin-bottom: 15px; } .popup { background: #fff; background: -webkit-linear-gradient(top, #fff, #ddd); background: -moz-linear-gradient(top, #fff, #ddd); background: -ms-linear-gradient(top, #fff, #ddd); background: -o-linear-gradient(top, #fff, #ddd); background: linear-gradient(to bottom, #fff, #ddd); margin: 0 auto; top: 60vh; left: 72vw; width: 80vw; height: 30vh; text-align: center; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px; -moz-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px; box-shadow: rgba(0,0,0,0.2) 0px 1px 3px; } a.button { margin: 0 1px; padding-top:80%; padding: 6px 50px 5px; font-weight: bold; font-size: 100%; color: #fff; text-align: center; border: none; border-right: 1px solid rgba(0,0,0,.2); border-bottom: 1px solid rgba(0,0,0,.2); background: #3d7cb1; background: -webkit-linear-gradient(top, #2cb0e5, #1a7cd3); background: -moz-linear-gradient(top, #2cb0e5, #1a7cd3); background: -ms-linear-gradient(top, #2cb0e5, #1a7cd3); background: -o-linear-gradient(top, #2cb0e5, #1a7cd3); background: linear-gradient(to bottom, #2cb0e5, #1a7cd3); text-shadow: rgba(0,0,0,.25) 1px 1px 1px; -webkit-border-radius: 13px; -moz-border-radius: 13px; border-radius: 13px; text-decoration: none; } a.button:hover { background: #1e80bc; background: -webkit-linear-gradient(top, #26a0cd, #1661ab); background: -moz-linear-gradient(top, #26a0cd, #1661ab); background: -ms-linear-gradient(top, #26a0cd, #1661ab); background: -o-linear-gradient(top, #26a0cd, #1661ab); background: linear-gradient(to bottom, #26a0cd, #1661ab); } a.button:active { background: #1e80bc; } span.heart { color: #c70000; font-size: 118%; } 

 <div id="test" > <p>Do you <span class="heart">♥</span> CSS ?</p> <a class="button" href="javascript:void(0);">No</a> <a class="button" href="javascript:void(0);">Yes</a> </div> <button id="btn1">displaypopup</button> 

Answer 3

因此，您要做的是首先使用一个不显示任何内容的hide css类来隐藏弹出窗口，然后单击按钮从弹出窗口中删除hide类，我还编写了代码以再次将其添加回注释中。

 function displaypopup() { document.getElementById('cssPopup').classList.remove('hide'); //to add the class again //document.getElementById('cssPopup').classList.add('hide'); } 

 body { background-image:url(18-thursday0044.gif); } p { font-size: 120%; margin-bottom: 15px; } .popup { background: #fff; background: -webkit-linear-gradient(top, #fff, #ddd); background: -moz-linear-gradient(top, #fff, #ddd); background: -ms-linear-gradient(top, #fff, #ddd); background: -o-linear-gradient(top, #fff, #ddd); background: linear-gradient(to bottom, #fff, #ddd); margin: 0 auto; top: 60vh; left: 72vw; width: 80vw; height: 30vh; text-align: center; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px; -moz-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px; box-shadow: rgba(0,0,0,0.2) 0px 1px 3px; } a.button { margin: 0 1px; padding-top:80%; padding: 6px 50px 5px; font-weight: bold; font-size: 100%; color: #fff; text-align: center; border: none; border-right: 1px solid rgba(0,0,0,.2); border-bottom: 1px solid rgba(0,0,0,.2); background: #3d7cb1; background: -webkit-linear-gradient(top, #2cb0e5, #1a7cd3); background: -moz-linear-gradient(top, #2cb0e5, #1a7cd3); background: -ms-linear-gradient(top, #2cb0e5, #1a7cd3); background: -o-linear-gradient(top, #2cb0e5, #1a7cd3); background: linear-gradient(to bottom, #2cb0e5, #1a7cd3); text-shadow: rgba(0,0,0,.25) 1px 1px 1px; -webkit-border-radius: 13px; -moz-border-radius: 13px; border-radius: 13px; text-decoration: none; } a.button:hover { background: #1e80bc; background: -webkit-linear-gradient(top, #26a0cd, #1661ab); background: -moz-linear-gradient(top, #26a0cd, #1661ab); background: -ms-linear-gradient(top, #26a0cd, #1661ab); background: -o-linear-gradient(top, #26a0cd, #1661ab); background: linear-gradient(to bottom, #26a0cd, #1661ab); } a.button:active { background: #1e80bc; } span.heart { color: #c70000; font-size: 118%; } .hide { display:none; } 

 <div class="popup hide" id="cssPopup"> <p>Do you <span class="heart">♥</span> CSS ?</p> <a class="button" href="javascript:void(0);">No</a> <a class="button" href="javascript:void(0);">Yes</a> </div> <button onclick="displaypopup()">displaypopup</button> 

Answer 4

添加可见性：隐藏； 或显示：无； 在您要隐藏的类的CSS中。 然后显示样式： 在您的JavaScript中，使popup类使弹出窗口可见。