Tạo popup thông báo khi click hoàn toàn bằng CSS - Khôi Ròm Blog

Tạo popup thông báo khi click hoàn toàn bằng CSS

Khôi Ròm - 7/05/2018 12:53:00 SA - Blogspot, CSS, Thủ thuật blogspot
Tạo popup thông báo khi click hoàn toàn bằng CSS

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}
Tiếp theo, chèn HTML vào trên thẻ đóng
</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êm
href="#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}
Tiếp đó, chèn HTML vào nơi cần hiển thị
<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: demo 1 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.

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é !

Contact