时间戳

首页 > 解决方案 > 仅在单击按钮时显示一个类

javascript - 仅在单击按钮时显示一个类

问题描述

我有一个类弹出窗口，它有两个按钮和一个你喜欢 css 的措辞，它在窗口加载时显示。

我有另一个按钮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">♥&lt;/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>

标签： javascripthtml

解决方案

这是您需要的：

<div class="popup" style="display: none;">
<p>Do you <span class="heart">♥&lt;/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>

推荐阅读