Cách thực hiện - Popup
Tìm hiểu cách tạo cửa sổ bật lên bằng CSS và JavaScript.
Cách tạo cửa sổ bật lên
Bước 1) Thêm HTML:
Ví dụ
<div class="popup" onclick="myFunction()">Click me!
<span class="popuptext"
id="myPopup">Popup text...</span>
</div>
Bước 2) Thêm CSS:
Ví 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:
Ví dụ
<script>
// When the user clicks on <div>, open the popup
function
myFunction() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
</script>
Hãy tự mình thử »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: Modal cũng tương tự như cửa sổ bật lên. Hãy xem Hướng dẫn cách tạo phương thức của chúng tôi để tìm hiểu về phương thức.