- Dưới đây mình sẽ chỉ các bạn cách tạo 1 popup có thể tắt bật tùy thích, nhưng do không dùng js nên là popup vẫn còn 1 lỗi nhỏ. Là khi các bạn tắt cái popup đấy đi thì nó sẽ dịch chuyển màn hình về cái vị trí mà bạn bật cái popup đấy. Bạn nào fix được thì nhắn lại bên dưới cho các bạn khác biết với nhé ( mình không rep lại đâu:) ).
- Đầu tiên tạo file text.html và text.css
- Bắt đầu code:
+ text.html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="text.css">
</head>
<body>
<a href="#modal-tkhd">Ấn vô nè</a>
<a href="https://www.youtube.com/"> ytb</a>
<div class="modal" id="modal-tkhd">
<div class="modal-tkhd-body">
<a class="modal-tkhd-body-close" href="#">X</a>
<h3>Trường Đại học Đông Đô</h3>
<p>................................................................................................</p>
</div>
</div>
</body>
</html>
+text.css :
.modal{
position: fixed;
top: 0;
right: 0;
left: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
visibility: hidden;
}
.modal-tkhd-body{
height: 100px;
width: 300px;
position: relative;
padding: 16px;
background-color: aliceblue;
}
.modal:target {
visibility: visible;
}
.modal-tkhd-body-close {
position: absolute;
top: 6px;
right: 6px;
text-decoration: none;
}