Hướng dẫn popup html, css template
Đã đăng vào thg 9 21, 2019 5:17 SA 2 phút đọc Đến hẹn lại lên, sau bài viết tìm hiểu về slick sẽ hứa viết bài cách sử dụng event nhưng chắc để lần sau. Như các bạn cũng đã biết chúng ta tạo ra popup để thông báo, form nhập thông tin, quảng cáo …. Để có thể viết 1 cái popup thì các bạn nghĩ ngay đến js, jquery, html, css, boostrap… Nhưng để viết popup sao cho nhẹ và giảm bớt js (đối với các bạn không thích js). Thì đây ! hôm nay mình sẽ hướng dẫn các bạn viết về nó. 1. HTMLChúng ta cần một div popup để có thể
show nó lên. Ở đây bạn có thể code nội dung của popup theo ý của mình và cần có một thẻ
2. CSSDùng một vài thủ thuật css cùi bắp dưới đây ta cũng có thể tạo ra một cái popup đơn giản.
Thủ thuật cùi bắp thứ nhất là làm cho màn hình tức popup full body mờ đi hay tạo cho ta cảm giác nó có tác động đến cả trang Riêng popup-content chúng ta css width, height, margin,..... Thuộc tính positon: relative để định vị trí cho các thẻ con. Vấn đề ở đây làm nằm ở thuộc tính target của css3, thuộc tính target sẽ css đến class được gọi. Ví dụ ở đây khi
Và nút close x đóng popup lợi dụng việc không tìm thấy điểm neo trang sẽ trở lại ban đầu mà không load lại. Nhưng url lại dính thêm chưởng # của các neo trên trang. Những kiến thức này có lẽ sẽ giúp ích cho các bạn design html css mà không cần phải sử dụng đến js (không ưa js). Cảm ơn các bạn đã quan tâm All rights reserved |