Bạn đang xem : cách tạo trang bật lên

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.

Hãy tự mình thử »

Cách tạo cửa sổ bật lên

Bước 1) Thêm HTML:

Ví dụ

& lt; div class = “popup” onclick = “myFunction ()” & gt; Nhấp vào tôi!
& lt; span class = “popuptext”
id = “myPopup” & gt; Văn bản bật lên … & lt; / span & gt;
& lt; / div & gt;

Bước 2) Thêm CSS:

Ví dụ

/ * Vùng chứa cửa sổ bật lên * /
.popup {
vị trí: tương đối;
hiển thị: nội tuyến-khối;
con trỏ: con trỏ;
}

/ * Cửa sổ bật lên thực tế (xuất hiện ở trên cùng)
* /
.popup .popuptext
{
khả năng hiển thị: ẩn;
chiều rộng:
160px;
background-color: # 555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0 ;
vị trí: tuyệt đối;
z-index: 1;
bottom: 125%;
left: 50%;

margin-left: -80px;
}

/ * Mũi tên bật lên * /
.popup .popuptext :: after {
content: “”;

vị trí: tuyệt đối;
trên cùng: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
màu viền: # 555 trong suốt
minh bạch trong suốt;
}

/ *
Chuyển đổi lớp này khi nhấp vào vùng chứa cửa sổ bật lên (ẩn và hiển thị
bật lên) * /
.popup .show {
khả năng hiển thị: hiển thị;
-webkit-animation:
fadeIn 1s;
animation: fadeIn 1s
}

/ * Thêm hoạt ảnh (mờ dần trong cửa sổ bật lên) * /
@ -webkit-keyframes fadeIn {
từ {opacity: 0;}
thành {opacity: 1;}
}

@keyframes fadeIn {
từ {opacity: 0;}
thành {opacity: 1;}
}

Bước 3) Thêm JavaScript:

Ví dụ

& lt; script & gt;
// Khi người dùng nhấp vào & lt; div & gt ;, hãy mở hàm
bật lên
myFunction () {
var popup = document.getElementById (“myPopup”);
popup.classList.toggle (“show”);
}
& lt; / script & gt; < br />

Xem Thêm  Ví dụ về chuỗi JavaScript - Cách chuyển một số thành chuỗi trong JS và hơn thế nữa - cách chuyển một số thành chuỗi trong javascript

Hãy tự mình thử »

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 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. Truy cập 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.


Xem thêm những thông tin liên quan đến chủ đề cách tạo một trang bật lên

Cách Thêm Tin Nổi Bật Trên Facebook Cho Điện Thoại | Tân tivi

  • Tác giả: Tân tivi
  • Ngày đăng: 2021-11-02
  • Đánh giá: 4 ⭐ ( 2924 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: How to Add Facebook Highlights to Phone | New TV
    Those of you who are looking for a way to add highlights on your facebook profile, this video will help you do, and fix not being able to save facebook highlights.
    ✔If you find it interesting, remember to click LIKE and REGISTER the video so your relatives or friends can watch it together.
    Share it with your friends.
    ✔Leave valuable COMMENTs below the video.
    © Copyright belongs to Tan Television
    © Copyright by Tan Television Channel Don’t Reup
    ✔Thank you all for watching and supporting the Channel.

    Watch the latest video: https://www.youtube.com/channel/UCQoeLsRL4f4WhR_AXUOb5OA?view_as=subscriber
    Tan’s Tutorial for You to Make Youtube Channel:
    https://www.youtube.com/channel/UCH6jAHsrnaB7Oz_S_Zsqi7g

    All comments and other issues you contact me.

    – Personal Facebook: https://www.facebook.com/trantan.org

    – Official Fanpage: https://www.facebook.com/tantantivi
    – Contact for advertising: tranvantan.dtdl@gmail.com
    – Via personal email: tvtvlogs7@gmail.com
    – My Tik Tok channel: https://www.tiktok.com/@youtubetantv
    Thank you very much.
    Wish you always success in life.
    Video search keywords: add fb highlights, how to add facebook highlights, add fb highlights, how to add fb highlights, how to add facebook highlights, how to add facebook highlights by phone, how to add featured news on facebook by phone, how to add featured news on fb, how to add featured news on fb iphone, instructions on adding featured news on facebook, how to add featured news on facebook iphone, do how to add highlights on facebook, how to add highlights on facebook, how to add highlights on facebook profile, how to add highlights on facebook profile, how to add more highlights on facebook , how to add featured news on facebook
    Tantivi facebook_tricks additional highlights on facebook

Cách tạo một trang trong Sharepoint

  • Tác giả: reviewkhachsan.com
  • Đánh giá: 5 ⭐ ( 4779 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Sharepoint là một sản phẩm của Microsoft tích hợp với Microsoft Word. Đó là một cách rất an toàn và hiệu quả để tạo các trang web nhỏ, nơi các nhóm có thể tải

3 cách thêm trang mới trong Word nhanh chóng trên mọi phiên bản

  • Tác giả: www.thegioididong.com
  • Đánh giá: 5 ⭐ ( 1640 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bài viết sẽ giúp bạn thêm trang mới trong Word trên mọi phiên bản một cách dễ dàng và nhanh chóng. Hướng dẫn chi tiết, dễ thực hiện. Cùng xem ngay thôi nào!

Hướng dẫn tạo website: Cách tạo trang web A-Z cho người mới

  • Tác giả: www.sapo.vn
  • Đánh giá: 3 ⭐ ( 6086 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Làm thế nào để tạo website khi bạn là người không rành về công nghệ? Bài hướng dẫn này sẽ giúp bạn tự tay tạo trang web dễ dàng và hiệu quả.

Tạo Website: Hướng Dẫn 7 Bước Cách Làm Một Trang Web

  • Tác giả: hoangvietduc.com
  • Đánh giá: 4 ⭐ ( 5648 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Giúp bạn nắm vững 7 bước cách tạo website cho hoạt động kinh doanh của mình, từ website bán hàng, doanh nghiệp, giới thiệu công ty, viết blog

Mở các trang web yêu thích ngay khi khởi động trình duyệt

  • Tác giả: thuthuattienich.com
  • Đánh giá: 4 ⭐ ( 6396 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thủ thuật này sẽ hướng dẫn các bạn cài đặt các trang web được mở ngay khi khởi động trình duyệt web. Hướng dẫn trên Chrome, Firefox, Edge, Cốc Cốc và IE.

Hướng dẫn cách đưa một trang web đơn giản lên mạng (không có Database)

  • Tác giả: hocmangcoban.blogspot.com
  • Đánh giá: 3 ⭐ ( 8184 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Python: Cách in từ điển - làm thế nào để in một python từ điển

By ads_php