HTML5 and CSS3 instance tutorial [Summary 1], html5css3

HTML5 and CSS3 instance tutorial [Summary 1], html5css3

Onclick behavior and content Separation

<a href='#'     onclcik = "window.open('holiday_pay.html',WinName,'width=300, height = 300');">Holiday Pay </a>

If the JS disabled link cannot direct the user to the corresponding page, do not assign "#" and similar values to the href attribute.

2. General situation

<a href='holiday_pay.html'     onclcik = "window.open(this.href,WinName,'width=300, height = 300');">Holiday Pay </a>

3.0 a large number of duplicate links are allocated with recognizable class names for each link. You can add listeners for each click event by using jQuery.

<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 Multi-User custom data type setting window size in the pop-up window

<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+"");}) ;});