Tạo Popup hiện ra khi click với hiệu ứng đẹp bằng CSS cho Blogspot
Ra mắt BSW Community - trang đăng bài tự do dành cho bạn, thoải mái trao đổi, đặt câu hỏi, thắc mắc, viết bài viết mới hay thậm chí rao vặt, buôn bán. Click trải nghiệm ngay!
Tạo Popup hiện ra khi click với hiệu ứng đẹp bằng CSS cho Blogspot. Sử dụng thẻ HTML :target, popup được thiết kế chỉ hoàn toàn bằng CSS với hiệu ứng và transform tuyệt đẹp cho Blogspot.Bạn có thể dùng nó để tạo popup thông báo, liên hệ, lưu ý,...
Xem demo
Chèn code
Quăng hết đống code này vào sau thẻ<body><style>#bsw_popup{top:0;left:0;right:0;bottom:0;position:fixed;opacity:0;visibility:hidden;transition:.5s;transform:scale(1.2)}
#bsw_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}
.bsw_popup_{background:#fff;border-radius:4px;z-index:999;width:600px;max-width:100%;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)}
.bsw_popup_ h2{margin:0 0 .75em;padding:0;text-align:center;font-weight:700;font-family:Roboto,sans-serif;color:#4267b2}
.bsw_popup_ h3{margin:0 0 5px;padding:0;font:500 15px Roboto;text-transform:uppercase}
.bsw_popup_ p{margin:0 0 20px;padding:0;font:400 15px Roboto;color:#555;line-height:1.5}
.bsw_popup_ p a{font-weight:700;color:#555}
.bsw_popup_ p a:hover{text-decoration:underline}
<!-- code popup bacsiwindows.com -->
</style>
<div id='bsw_popup'>
<div class='bsw_popup_'>
<h2>Hướng dẫn bình luận</h2>
<h3>Chèn link</h3>
<p>Sử dụng thẻ <code>&lt;a href=&#39;LINK&#39;&gt;TÊN_HIỂN_THỊ&lt;/a&gt;</code></p>
<h3>Chèn hình ảnh</h3>
<p><code>[img] LINK_ANH [/img]</code> - sử dụng công cụ bên dưới để upload ảnh.</p>
<h3>Định dạng chữ</h3>
<p> &lt;b&gt; <b>Chữ in đậm</b> &lt;/b&gt;<br/> &lt;i&gt; <i>Chữ in nghiêng</i> &lt;/i&gt;<br/> &lt;u&gt; <u>Chữ gạch chân</u> &lt;/u&gt;<br/> &lt;strike&gt; <strike>Chữ gạch ngang</strike> &lt;/strike&gt;<br/> </p>
<h3>Chèn một đoạn Code</h3>
<p>Đầu tiên sử dụng <a href='//bacsiwindows.com/mahoahtml' target='blank'>công cụ này</a> để mã hóa đoạn code muốn chèn.<br/>Sau đó dùng thẻ <code>[code] CODE_ĐÃ_MÃ_HÓA [/code]</code></p><a class='close' href='#close' title='Close'><i aria-hidden='true' class='fa fa-check'/> Đã hiểu</a> </div>
</div>
Cách sử dụng
Thêmhref="#bsw_popup" hoặc id="#bsw_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="#bsw_popup">Mở Popup</a>
Copyright © 2017
41 nhận xét:
Chất quá a <3
Chia sẻ cho một cái nhá (y)
Nút share đâu mất tiu r a
Nút chia sẻ nằm ngay trên phần bình luận đó em, hoặc nút Facebook chớp chớp bên phải cũng được đó.
Quá hay :v đã share cho anh Trường Đẹp Tri
Cảm ơn em <3 :v
Bài viết rất bổ ích, cảm ơn a vì đã chia sẻ, e share bài viết rồi nhé /=ok
Oke cảm ơn em nhé <3 /=clap
Mà không tin cái này không dùng js, đỉnh ghê vậy luôn đó (y)
Ừm toàn CSS thôi em, xem code đi không có một tí nào js luôn :D
Ủa mà cho code vào sao <body> rồi làm gì để click anh
Theme href="#bsw_popup" vào bất cứ nút nào mà em muốn nó hiện thôi em.
chất quá anh :<
Cảm ơn em, hay thì chia sẻ nhé (y)
Đẹp trai phải thế :v Vỗ tay vỗ tay /=clap
:v đẹp trai
Cập nhật trên bài đi anh
Ok đã cập nhật /=ok
Chỉ rõ cho em được không anh
Xem lại bài viết đi anh vừa cập nhật đấy.
Vẫn không được a
Copy lại code mới đi em, mới fix lỗi.
Share cái CÓ THỂ BẠN QUAN TÂM đi :v
Google tìm related post nhá.
Như ông mới đẹp :))
RIP về mà xài đi, nghe đồn mấy này giỏi lắm mà?
K có js là t thích. Thanks so much vì bài viết bổ ích nhé :)
Vl nó ra cái mặt kia, đổi lại icon. Thanks so much vì bài viết bổ ích nhé :D
Ok cảm ơn nè :v
Ok bro /=ok
Vì chưa có CSS của .close đó.
Nay cúp điện cmnr nên không lên PC xem được.
tính chèn cái code upanh imgur kiểu này mà bị xung đột với code lightbox chán ghê
Ủa đâu liên quan gì nhau mà xung đột hửm!?
Thêm CSS trước ]]></b:skin>
a.close{color:#fff;background:#4267b2;text-align:center;display:block;padding:8px 25px;margin:0;width:80px;border-radius:4px;text-transform:uppercase;font:500 14px Roboto;letter-spacing:.5px;float:right}
thử rồi 1 là cái lightbox không hoạt động 2 là up ảnh k hoạt động
Thiệt là hai cái code không liên quan gì nhau luôn mà lại xung đột à. K hiểu nổi?
thử cái là biết ngay à :v
Có hai cách khắc phục :))
1 . Xóa #bsw_popup sau liên kết.
2 . Xóa popup luôn cho khỏi xuất hiện :v
Như trên.
Là bài viết bạn đang xem đó bạn.
Đăng nhận xét