通过单击HTML中现有屏幕上的按钮打开新屏幕
通过单击HTML中现有屏幕上的按钮打开新屏幕
提问于 2021-08-15 15:02:59
我在做一个推特网站。但是我不能解决这个问题。当我想单击此按钮时：
我希望得到这样的结果：
它的背景将如下所示，它将在屏幕上弹出一个窗体。我应该用什么来解决这个问题？我对HTML DOM的使用还不错，但是我不能理解我脑海中的算法。
回答 2
Stack Overflow用户
回答已采纳
发布于 2021-08-15 16:03:09
实现这一目标的另一种方法是使用已经存在但仅在单击某个按钮后才会显示的模式框(div)。
这里有一个简单的例子，我还添加了一个覆盖，它将出现在div后面。如果您在模式框可见时单击覆盖，它将再次消失。
$('#button').click(() => {
var display = $('#popup').css('display');
if (display === "none") {
$('#popup').show();
$('#overlay').fadeIn();
}
else {
$('#popup').hide();
$('#overlay').fadeOut();
}
});
$('#overlay').click(() => {
$('#popup').hide();
$('#overlay').fadeOut();
});* {
margin: 0;
padding: 0;
}
#popup {
position: absolute;
background-color: #fff;
padding: 6%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 30%;
height: 30%;
border-radius: 30px;
z-index: 10;
display: none;
}
#overlay {
position: fixed;
background-color: rgba(0,0,0,0.5);
width: 100%;
height: 100%;
display: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
<div id="overlay"></div>
<div id="button">Click me</div>
<div id="popup">Text</div>
</body>
</html>
Stack Overflow用户
发布于 2021-08-15 15:24:45
为此，您可以使用JavaScript或jQuery。
例如：
$(".mybutton").click(() => {
$("body").append(`
<div class="modals">
Copy your code here
</div>
`)
}).modals{
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
padding: 40px 30px;
background-color: #e2e2e2;
border-radius: 4px;
}<button class="mybutton">Open</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68792745
复制相关文章
相似问题
腾讯云开发者
