Thủ thuật tạo cửa sổ Popup đơn giản bằng JQUERY cho Blogspot

Điểm 4.6/5 dựa vào 87 đánh giá

Bài viết dưới đây sẽ giới thiệu bạn cách để có thể tạo một hộp cửa sổ thông báo khi click vào link trên web/blog. Điều này sẽ giúp khách truy cập không cần thoát trang nhưng vẫn có thể xem được thông tin. Mình sẽ hướng dẫn bạn cách tạo trên Blogger

Thủ thuật tạo cửa sổ Popup đơn giản bằng JQUERY cho Blogspot

1. Đầu tiên đăng nhập Blogger
2. Đi đến Chủ đề >> Chỉnh sửa HTML và dán đoạn CSS bên dưới trước thẻ ]]></b:skin>
.dummy-text {
width:50%;
margin: 100px auto;
}

.modalwindow {
position:fixed;
width:440px;
height:200px;
display:none;
z-index:9999;
padding:20px;
}

.modalwindow {
min-width: 300px;
width: -webkit-min-content;
width: -moz-min-content;
width: min-content;
height:auto;
background: #dd3333;
font-size: 18px;
color: #FFF;
}

.modalwindow h3 {
margin: 0 0 15px 0;
padding: 0;
border-bottom: 1px solid #000;
width: 100%;
display: block;
}

.modalwindow h3 span a {
float: right;
text-decoration: none;
color: #000;

}

3. Tiếp theo bạn dán đoạn code bên dưới trước thẻ </head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$('a[name=modal]').click(function(e) {
e.preventDefault();
var id = $(this).attr('href');
var winH = $(window).height();
var winW = $(window).width();
$(id).css('top', winH/2-$(id).height()/2);
$(id).css('left', winW/2$(id).width()/2);
$(id).fadeIn(500);
});

$('.modalwindow .close').click(function (e) {
e.preventDefault();
$('.modalwindow').fadeOut(500);
});
});
//]]>
</script>

4. Bên dưới là đoạn HTML để bạn thiết lập nội dung cho cửa sổ Popup.
<div class="dummy-text">
<p> <a href="/#modalimg" name="modal">Chương trình khuyến mãi đặc biệt</a> mua template blogspot tặng ngay tên miền, số lượng không giới hạn.
</p>
</div>

<!-- noi dung popup -->
<div id="modalimg" class="modalwindow">
<h3>Chương trình khuyến mãi đặc biệt tết Nguyên Đán <a class="close" style="cursor:pointer">X</a>
</h3> <a href="https://www.viettheme.net/" target="_blank"><img src="https://lh4.googleusercontent.com/-xbEbHUT01LI/W-urxb6MUQI/AAAAAAAANgQ/E3yGjcCGpQ0CL_i9eKzn5uuNWdRaU_W9wCLcBGAs/s1600/web.png" width="300" height="250"></a>
</div>

5. Cuối cùng save lại là xong. Chúc bạn thành công!

Tham khảo Hocwebgiare

Không có nhận xét nào