Jquery是一個流行的JavaScript庫,其中包含許多強大的功能,例如設置自己的彈出框. 以下是通過Jquery設置彈出框的步驟:
$(document).ready(function(){ //在頁面加載完畢后執行以下代碼 //1. 創建一個新的div元素作為彈出框 var $popup = $('<div></div>').addClass('popup'); //2. 創建一個新的標題作為彈出框的標題 var $title = $('<h2></h2>'); //3. 創建一個新的內容作為彈出框的內容 var $content = $('<p></p>'); //4. 將標題和內容添加到彈出框中 $popup.append($title).append($content); //5. 將彈出框添加到頁面中 $('body').append($popup); //6. 隱藏彈出框 $popup.hide(); //7. 當用戶點擊鏈接時,顯示彈出框 $('a').click(function(event){ event.preventDefault(); $title.text($(this).attr('title')); $content.text($(this).attr('href')); $popup.show(); }); //8. 當用戶點擊彈出框以外的地方時,隱藏彈出框 $popup.click(function(){ $popup.hide(); }); });
在以上代碼中,我們首先創建了一個新的div元素作為彈出框,并將其添加到頁面中。然后創建了一個標題和一個內容作為彈出框的內容,并將它們添加到彈出框中。我們還給彈出框添加了一個隱藏的樣式,并在用戶點擊鏈接時,顯示彈出框,并將標題和內容設置為鏈接的title和href屬性。最后,我們添加了一個點擊事件,當用戶點擊彈出框以外的地方時,隱藏彈出框。
下一篇css div 擴充