關于onclick的行為與內容分離
1.通過鏈接觸發彈出窗口方式 （不推薦使用此方法！！！）
XML/HTML Code復制內容到剪貼板
- <a href='#'
- onclcik = "window.open('holiday_pay.html',WinName,'width=300, height = 300');">
- Holiday Pay
- </a>
如果JS被禁用鏈接無法引導用戶進入對應頁面,不要為href屬性賦"#"及類似的值
2.普通情況
XML/HTML Code復制內容到剪貼板
- <a href='holiday_pay.html'
- onclcik = "window.open(this.href,WinName,'width=300, height = 300');">
- Holiday Pay
- </a>
3.0 大量重復鏈接，為每個鏈接分配可識別類名,通過使用jQuery為每個click事件分別添加監聽器
XML/HTML Code復制內容到剪貼板
- <a href="holiday_pay" class="popup">Holiday pay</a>
-
- var links = $("a.popup");
-
- links.clcik(function(event){
- event.preventDefault();
- window.open($(this).attr('href'));
- });
3.1 通多自定義數據類型設置彈出窗口尺寸大小
XML/HTML Code復制內容到剪貼板
- <a href ="holiday_pay.html"
- data-width="600"
- data-heigth = "400"
- title = "Holiday Pay"
- class = "popup"> Holiday pay </a>
JavaScript Code復制內容到剪貼板
- $(function(){
- $(".popup").click(function(event){
- event.preventDefault();
- var href=$(this).attr("href");
- var width = $(this).attr("data-width");
- var height = $(this).attr("data-height");
- var popup = window.open(href,"popup","height="+height+",width="+width+"");
- }) ;
- });
以上這篇HTML5和CSS3實例教程總結(推薦)就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
原文地址：http://www.cnblogs.com/liul0703/p/5677644.html
