CÁCH THỨC - Cửa sổ bật lên
Tìm hiểu cách tạo cửa sổ bật lên bằng CSS và JavaScript.
Nhấp vào tôi để chuyển đổi cửa sổ bật lên!
Một cửa sổ bật lên đơn giản!
Cách tạo cửa sổ bật lên
Bước 1) Thêm HTML:
Thí dụ
<div class="popup" onclick="myFunction()">Click me!
<span class="popuptext"
id="myPopup">Popup text...</span>
</div>
Bước 2) Thêm CSS:
Thí dụ
/* Popup container */
.popup {
position: relative;
display: inline-block;
cursor: pointer;
}
/* The actual popup (appears on top)
*/
.popup .popuptext
{
visibility: hidden;
width:
160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -80px;
}
/* Popup arrow */
.popup .popuptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent
transparent transparent;
}
/*
Toggle this class when clicking on the popup container (hide and show the
popup) */
.popup .show {
visibility: visible;
-webkit-animation:
fadeIn 1s;
animation: fadeIn 1s
}
/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
@keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}
}
Bước 3) Thêm JavaScript:
Thí dụ
<script>
// When the user clicks on <div>, open the popup
function
myFunction() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
</script>
Các trang liên quan
Mẹo: Chú giải công cụ tương tự như cửa sổ bật lên. Đi tới Hướng dẫn Cách tạo Chú giải công cụ của chúng tôi để tìm hiểu về chú giải công cụ.
Mẹo: Các chế độ cũng tương tự như cửa sổ bật lên. Đi tới Hướng dẫn cách tạo chế độ của chúng tôi để tìm hiểu về các chế độ.