极客教程如何使用HTML和CSS创建弹出框
在本文中，我们将看到如何使用HTML和CSS创建弹出框。弹出框（或对话框）是用于向用户提供信息、警告或接收输入的模态窗口。弹出窗口不应该被使用，因为它们会阻止用户访问程序的其他方面，直到弹出窗口被关闭。
方法1： 在这个方法中，我们将展示如何使用HTML和CSS创建弹出框或窗口。我们使用一些基本的HTML标签，如标题、段落、按钮和锚点。我们创建一个按钮，当点击时，弹出框将打开，你可以在输出中看到。通过使用href属性将锚点元素附加到具有“modal”类的弹出框，该属性用于指定到“popup-box”地址的链接。
示例1： 这个示例描述了使用HTML和CSS创建弹出框的基本方法。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<style>
.box {
background-color: black;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
p {
font-size: 17px;
align-items: center;
}
.box a {
display: inline-block;
background-color: #fff;
padding: 15px;
border-radius: 3px;
}
.modal {
align-items: center;
display: flex;
justify-content: center;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(254, 126, 126, 0.7);
transition: all 0.4s;
visibility: hidden;
opacity: 0;
}
.content {
position: absolute;
background: white;
width: 400px;
padding: 1em 2em;
border-radius: 4px;
}
.modal:target {
visibility: visible;
opacity: 1;
}
.box-close {
position: absolute;
top: 0;
right: 15px;
color: #fe0606;
text-decoration: none;
font-size: 30px;
}
</style>
</head>
<body>
<div class="box">
<a href="#popup-box">
Click to Open Popup Box !
</a>
</div>
<div id="popup-box" class="modal">
<div class="content">
<h1 style="color: green;">
Hello GeeksForGeeks !
</h1>
<b>
<p>Never Give Up !</p>
</b>
<a href="#"
class="box-close">
×
</a>
</div>
</div>
</body>
</html>
HTML
输出:
方法2： 在这个例子中，我们使用HTML和CSS来创建自动弹出窗口，借助一些标记标签如按钮、标题、锚点和div元素，然后使用几行JavaScript代码来创建动态弹出窗口，我们只需在屏幕上自动加载弹出窗口。我们使用内部的CSS来进行样式化，使用类名作为选择器。JavaScript中的addEventListener()函数用于监听点击事件，以显示和关闭id为”myPopup”的弹出框。
例子2： 这是另一个例子，描述了使用HTML和CSS创建弹出框的方法。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<style>
.popup {
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.4);
display: none;
}
.popup-content {
background-color: white;
margin: 10% auto;
padding: 20px;
border: 1px solid #888888;
width: 30%;
font-weight: bolder;
}
.popup-content button {
display: block;
margin: 0 auto;
}
.show {
display: block;
}
h1 {
color: green;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>Create popup box using HTML and CSS</h3>
<button id="myButton">
Click me
</button>
<div id="myPopup" class="popup">
<div class="popup-content">
<h1 style="color:green;">
GeekforGeeks !
</h1>
<p>This is a popup box!</p>
<button id="closePopup">
Close
</button>
</div>
</div>
<script>
myButton.addEventListener("click", function () {
myPopup.classList.add("show");
});
closePopup.addEventListener("click", function () {
myPopup.classList.remove("show");
});
window.addEventListener("click", function (event) {
if (event.target == myPopup) {
myPopup.classList.remove("show");
}
});
</script>
</body>
</html>
HTML
输出：
