仅在单击按钮时显示班级

时间：2018-10-21 10:21:20

标签： javascript html

我有一个弹出类，其中有两个按钮和一个您喜欢CSS的词，它们在窗口加载时显示。

我还有另一个按钮 displaypopup 。

Im trying to hide class popup and only display when button displaypopup 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>

4 个答案:

答案 0 :(得分：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>

答案 1 :(得分：1)

您可以通过不首先将类添加到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>

答案 2 :(得分：1)

所以您要做的是首先使用隐藏 CSS类隐藏弹出窗口，并且不显示任何内容，然后单击按钮，从弹出窗口中删除隐藏类，我还编写了将代码添加回去的代码再次在评论中。

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>

答案 3 :(得分：0)

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

相关问题
最新问题