Tạo popup hiển thị khi click thực thể cho blogger/website

Nay thì mình xin chia sẽ cho mọi người cách tạo một cái popup khi chúng ta click vào button hay hình thì popup mới hiện lên. 

Tạo popup hiển thị khi click thực thể cho blogger/website

Popup này thì nó khắc ở các popup thông thường là khi chúng ta click vào button hay img thì mới hiện lên thôi. Chứ không như các popup thông thường khác chỉ cần reload lại trang là nó sẽ hiện, làm ảnh hưởng đến trãi nghiệm của người dùng rất nhiều.

Với popup này thì mọi người có thể chèn quảng cáo, hình ảnh, text....  Hoặc cũng có thể làm công cụ thông báo trước các event sắp diễn ra, popup như thế cũng còn giúp người dùng cảm thấy thích thú với trang web của bạn hơn, thêm xinh động cho website hơn nhé. 

Okii bắt đầu làm thôi. 

Bước 1: vào trang quản trị blogger --> chủ đề --> chỉnh sửa html 

Bước 2: tìm thẻ </head> và dán đoạn code phía bên dưới vào phía trên của thẻ đóng </head> 

<script type="text/javascript">
//<![CDATA[
function OpenPopup(Url,WindowName,width,height,extras,scrollbars) {
var wide = width;
var high = height;
var additional= extras;
var top = (screen.height-high)/2;
var leftside = (screen.width-wide)/2; newWindow=window.open(''+ Url + 
'',''+ WindowName + '','width=' + wide + ',height=' + high + ',top=' + 
top + ',left=' + leftside + ',features=' + additional + '' + 
',scrollbars=1');
newWindow.focus();
}
//]]>
</script>

Bước 3: lưu lại và bây giờ tiến hành cài đặt chỗ hiện popup. 

Bước 4: lựa chọn kiểu popup để hiển thị. 

Ở đây mình có 2 kiểu popup khi click là button và image. 

Để popup hiển thị khi click vào button thì các bạn dùng dạng click popup như này

<a href="javascript: void(0);" onclick=" javascript:OpenPopup('https://www.NguyenThanhQuoc.Site/','WindowName','570','300','scrollbars=1');">Tên Hiển Thị</a>

Để popup hiển thị khi click vào image ( hình ảnh ) thì các bạn sử dụng code sao. 

<a href="javascript: void(0);" onclick=" javascript:OpenPopup('https://www.NguyenThanhQuoc.Site/','WindowName','550','290','scrollbars=1');"><img alt="Popup hình ảnh" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAiXIOhto4vYrmexIL8DhKNuQzfBggRkooTlVn3RRx56K4m4_S4E3dvv2ql2usNVVxjBkhk_kTGsi99mI01XBgjzGouWHH752PL219g226rAbspm6jMya1eJeTd9iTQAGWSTrBj_EZbho/s150/remove.png" title="Mô tả ảnh" /></a>

Tùy chỉnh :

https://www.NguyenThanhQuoc.Site/ các bạn thay thành link trang web của các bạn hoặt hình ảnh sẽ hiển thị trong popup. 

500 và 300 là kích thước popup hiển thị của các bạn. 

Nếu hình ảnh của các bạn quá lớn hoặc nội dung bị tràn làm xuất hiện thanh cuộn bạn có thể tắt thanh cuộn này bằng cách sửa giá trị scrollbars=1 thành scrollbars=0

Okii thì mình vừa chia sẽ cho các bạn cách tạo popup khi click vào thực thể, nếu như có thắc mắc gì thì hãy comment bên dưới cho mình biết nhá, chúc các bạn thành công nhé.