Tạo popup thông báo khi click hoàn toàn bằng CSS
Khôi Ròm - tháng 7 05, 2018 -
Blogspot, CSS, Thủ thuật blogspot
Trước đây, các bạn có thể đã biết đến popup thông báo tạo bằng jquery, hãy quên nó đi, bây giờ mình sẽ hướng dẫn cho các bạn 2 style popup bằng CSS, bớt được jquery và javascript là tăng tốc độ load trang web bạn đấy.
Cách thực hiện
Style 1Ở style 1, mình sử dụng thẻ HTMl :target để tạo ra popup ẩn hiện khi click. Cách này được tham khảo từ Bác Sĩ Window
Đầu tiên, các bạn chèn CSS
#popup{top:0;left:0;right:0;bottom:0;position:fixed;opacity:0;visibility:hidden;transition:.5s;transform:scale(1.2)}
#popup:target{transform:scale(1);background:rgba(0,0,0,.2);opacity:1;visibility:visible;position:fixed;top:0;left:0;right:0;bottom:0;margin:0;z-index:999999999999;transition:.5s}
.popup_{background:#fff;border-radius:4px;z-index:999;width:600px;max-width:90%;position:fixed;top:45%;left:50%;transform:translate(-50%,-50%);margin:0;padding:20px;box-sizing:border-box;box-shadow:0 0 100px rgba(0,0,0,.1)}
.popup_ h2{margin:0 0 .75em;padding:0;text-align:center;font-weight:700;font-family:Roboto,sans-serif;color:#4267b2}
.popup_ h3{margin:0 0 5px;padding:0;font:500 15px Roboto;text-transform:uppercase}
.popup_ p{margin:0 0 20px;padding:0;font:400 15px Roboto;color:#555;line-height:1.5}
.popup_ p a{font-weight:700;color:#555}
.popup_ p a:hover{text-decoration:underline}</body>
<div id='popup'>
<div class='popup_'>
<h2>Demo</h2>
<h3>Đây là demo</h3>
<p>Demo demo demo demo demo<br/>demo demo demo<br/>demo demo demo demo</p>
<a class='close' href='#close' title='Close'><i aria-hidden='true' class='fa fa-check'/> Đóng</a>
</div>
</div>Cách sử dụng
Thêmhref="#popup"hoặc
id="#popup"vào bất cứ thẻ nào mà bạn muốn khi click sẽ hiện popup ra là được.
ví dụ <a href="#popup">Mở Popup</a>
Các bạn có thể xem demo trực tiếp
Style 2
Ở style 2, mình sử dụng CSS checkbox
Đầu tiên các bạn chèn CSS
cs-app,cs-app *{box-sizing:border-box;border:none;background:transparent;padding:0;margin:0;display:block}
cs-app{margin:auto;width:100%;max-width:450px}
cs-app cs-tiles{height:344px;position:relative}
cs-app cs-tiles input{display:none}
cs-app cs-tiles cs-tile-container{display:flex;position:relative;height:70px;width:100px;-webkit-transform:translateX(-50%);transform:translateX(-50%);transition:all 0.15s 0.15s;z-index:1000}
cs-app cs-tiles cs-tile-container cs-tile{background:#36f;margin:auto;width:90%;height:80%;border-radius:2px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;transition:all 0.15s 0.15s,background 0.15s}
cs-app cs-tiles cs-tile-container cs-tile:hover{box-shadow:0 3px 10px rgba(0,0,0,0.75);background:#668cff}
cs-app cs-tiles cs-tile-container cs-tile cs-text{transition:all 0.15s 0.15s;width:100%;text-align:center;line-height:70px;white-space:nowrap;text-transform:uppercase}
cs-app cs-tiles cs-tile-container cs-tile cs-content{transition:all 0.15s,max-height 0s;opacity:0;pointer-events:none;overflow:hidden;max-height:0}
cs-app cs-tiles cs-tile-container cs-tile .cs-open{cursor:pointer;position:absolute;width:100%;height:100%;top:0;left:0}
cs-app cs-tiles cs-tile-container cs-tile .cs-close{cursor:pointer;transition:all 0.15s;position:absolute;opacity:0;top:25px;right:25px;-webkit-transform:rotateZ(45deg) translateX(-50%) translateY(-50%);transform:rotateZ(45deg) translateX(-50%) translateY(-50%);font-size:25px}
cs-app cs-tiles input:checked + cs-tile-container{transition:all 0.25s;width:100%;height:100%;left:50%;top:50%;-webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%);z-index:10000}
cs-app cs-tiles input:checked + cs-tile-container cs-tile{transition:all 0.25s;background:#3b3;height:80%;width:80%;display:flex;flex-direction:column;padding:20px;box-shadow:0 0 20px rgba(0,0,0,0.5)}
cs-app cs-tiles input:checked + cs-tile-container cs-tile:hover{cursor:initial}
cs-app cs-tiles input:checked + cs-tile-container cs-tile .cs-open{display:none}
cs-app cs-tiles input:checked + cs-tile-container cs-tile .cs-close{transition:all 0.15s 0.25s;opacity:1}
cs-app cs-tiles input:checked + cs-tile-container cs-tile .cs-close:hover{transition:all 0.15s;opacity:0.5}
cs-app cs-tiles input:checked + cs-tile-container cs-tile cs-text{transition:all 0.15s 0.25s;font-size:24px;line-height:50px}
cs-app cs-tiles input:checked + cs-tile-container cs-tile cs-content{flex:1;transition:all 0.25s 0.4s,max-height 0s 0.4s,flex 0s 0.4s;opacity:1;margin-top:10px;pointer-events:initial;width:100%;max-height:1000000px;overflow:hidden}<cs-app>
<cs-tiles>
<input id='demo-1' type='checkbox'/>
<cs-tile-container>
<cs-tile>
<label class='cs-open' for='demo-1'/>
<label class='cs-close' for='demo-1'>+</label>
<cs-text>demo 1</cs-text>
<cs-content>demo text. demo text. demo text. demo text. demo text. demo text. demo text. demo text. demo text. demo text. demo text. demo text. demo text. demo text. demo text. demo text. demo text. demo text. demo text. demo text. demo text. demo text. demo text. demo text. demo text. demo text. demo text.</cs-content>
</cs-tile>
</cs-tile-container>
</cs-tiles></cs-app>Xem demo trực tiếp:
Giải thích
Style 1: đặc điểm của style 1 là có thể chèn vào bất cứ button, thẻ <a> nào mà bạn muốn, nhưng điểm bất lợi là khi click sẽ tạo ra đuôi link #popup ở phía trên thanh link, và người dùng muốn sử dụng nút back để quay lại trang trước thì phải ấn 3 lần.Style 2: đặc điểm của style 2 là không tạo ra link giống như style 1, hiệu ứng khá tuyệt, tuy nhiên chỉ có thể chèn vào 1 button mặc định của css này.
Tổng kết
Vậy là mình đã giới thiệu cho các bạn 2 style popup CSS tuyệt vời này, tùy theo sở thích mỗi người mà sử dụng. Chúc các bạn thành công, đừng quên để lại bình luận nhé !