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
6
3
9
9
3
Html viết:
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Học Web Chuẩn</title> <script src="https://hocwebchuan.com/example/js/jquery-1.8.3.min.js"></script> <script src="https://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('https://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ả
Tham khảo thêm tại: biggerlink