display a class only when button is clicked

Question

I have a class popup which have two buttons and a wording do you love css, which get displayed when window loads.

I have another button displaypopup .

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

I created a button displaypopup and given an onclick function displaypop().

How to hide the class popup initially when window loads and display only when button displaypop is clicked>

 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

here is what you need:

<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>

add display: none; here, and:

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

add this function, also in button you need to correct function initialization:

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

Answer 2

You could do this by not adding the class to your div initially. Instead add an eventListener to your button and then on click of the button add the class attribute to the div.

Here's a working example.

 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

So what you do is hide the popup initially using a hide css class with display none and on clicking the button remove the hide class from your popup and i have also written the code to add it back again in comments.

 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

Add visibility: hidden; or display: none; in your css for the class you want to hide. Then make the style display: block; in your JavaScript for the popup class to make the popup visible.