Biggerlink với popup

Việc mở một link pupup từ một biggerlink nếu không biết cách dùng sẽ gây không ít khó khăn khi code, bài hướng dẫn sau sẽ giúp chúng ta làm điều đó.

Biggerlink mở popup

Tương tự như mở một tab mới, để mở một popup ta cần viết thêm một đoạn js gọi cửa sổ mới khi thành phần khối được click.

Trình duyệt

  • Internet Explorer6
  • Firefox3
  • Opera9
  • Google Chrome9
  • Safari3

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Học Web Chuẩn</title>
<script src="http://hocwebchuan.com/example/js/jquery-1.8.3.min.js"></script>
<script src="http://hocwebchuan.com/example/js/biggerlink.js"></script>
<script>
//Đây là đoạn gọi function .biggerlink()
$(function(){
    $('.blockList').biggerlink(
        setting = { follow: 'false' }
    );
});
</script>
<style>
* { /* reset lại margin và padding cho các tag */
    margin: 0;
    padding: 0;
}
.blockList {
    width:280px;
    padding:10px;
    border:1px solid #CCC;
}
/*Đây là class được biggerlink.js thêm vào dành để điều khiển hover*/
.bl-hover {
    background: #CFF;
}
.blockList a {
    color:#f00;
    text-decoration:none;
}
</style>
</head>
<body>
<div class="blockList">
    <h3><a href="javascript:void(0)" onClick="MyWindow=window.open('http://www.google.com', 'MyWindow', 'toolbar=no, location=no, width=960, height=600'); return false;">Biggerlink popup</a></h3>
    <p>Nội dung của thành phần khối, nội dung này sẽ xuống hàng khi gặp giới hạn chiều rộng của thẻ bao ngoài nội dung này sẽ xuống hàng khi gặp giới hạn chiều rộng của thẻ bao ngoài.</p>
</div>
</body>
</html>

Hiển thị trình duyệt:

Click vào thành phần khối trên để thấy kết quả

Download file để thực hành

Tham khảo thêm tại: biggerlink

Trả lời

Thư điện tử của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *