HTML5 및 CSS3 튜토리얼 요약(권장)

onclick 동작과 내용의 분리에 대하여

1. 링크를 통해 팝업창 실행(이 방법은 권장하지 않습니다!!!)

<a href=&#39;#&#39;    

        onclcik = "window.open(&#39;holiday_pay.html&#39;,WinName,&#39;width=300, height = 300&#39;);">  

    Holiday Pay    

    </a>

JS가 비활성화되어 있고 링크가 사용자를 해당 페이지로 안내할 수 없는 경우 href 속성에 "#" 및 유사한 값을 할당하지 마세요

2. 일반적인 상황

<a href=&#39;holiday_pay.html&#39;    

        onclcik = "window.open(this.href,WinName,&#39;width=300, height = 300&#39;);">  

    Holiday Pay    

    </a>

3.0 다수의 반복 링크, 각 링크에 식별 가능한 클래스 이름 지정 및 jQuery 장치를 사용하여 각 클릭 이벤트에 대한 리스너 추가

<a href="holiday_pay" class="popup">Holiday pay</a>  

      

    var links = $("a.popup");   

      

    links.clcik(function(event){   

       event.preventDefault();   

       window.open($(this).attr(&#39;href&#39;));      

    });

3.1 여러 사용자 정의 데이터 유형을 통해 팝업 창 크기 설정

<a href ="holiday_pay.html"  

        data-width="600"  

        data-heigth = "400"  

        title = "Holiday Pay"  

        class = "popup"> Holiday pay </a>

$(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 예제 튜토리얼 요약(권장)은 편집자가 여러분에게 도움이 되길 바랍니다. 더 많은 관련 내용을 보려면 PHP 중국어 웹사이트(www.php.cn)를 주목하세요!