本文實例為大家分享了jQuery彈窗效果展示的具體代碼，供大家參考，具體內容如下
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>彈窗</title> <script type="text/javascript" src="../jquery-3.2.1.min.js"></script> <style type="text/css"> *{margin: 0px;padding: 0px;} #login{height:300px;width: 300px;border: 1px solid #ddd;position: absolute; } #close{position: absolute;right: 0px;top: 0px;} </style> <script type="text/javascript"> // JS創建一個div標簽，也就是節點元素 // window.onload=function(){ // document.createElement('div'); // } // 使用jQuery創建：$('<div>');帶尖括號的是創建，不帶是選擇的意思 $(function(){ // var oDiv=$('<div>'); // $('body').append(oDiv); $('input').click(function(){ var oLogin=$('<div id="login"><p>用戶名<input type="text"></p><p>密碼<input type="text"></p><div id="close">X</div></div>');//此功能就相當于body中注釋的代碼 $('body').append(oLogin); oLogin.css('left',($(window).width()-oLogin.outerWidth())/2); oLogin.css('top',($(window).width()-oLogin.outerHeight())/2);//是彈窗能夠出現在瀏覽器的中間 $("#close").click(function(){ oLogin.remove(); }) // jquery 中$()里window不用加引號 // 添加resize()瀏覽器窗口大小改變 // scroll():滾動條，以下的作用是當滾動條滾動時候，彈窗的位置也不變化 $(window).on("resize scroll",function(){ oLogin.css('left',($(window).width()-oLogin.outerWidth())/2+$(window).scrollLeft()); oLogin.css('top',($(window).width()-oLogin.outerHeight())/2+$(window).scrollTop()); }) }); }); </script></head><body> <input type="button" value="點擊"> <!-- <div id="login"> <p>用戶名<input type="text"></p> <p>密碼<input type="text"></p> <div id="close">X</div> </div> --></body></html>用到的點：
jQuery創建：$('<div>');
彈窗的位置：
oLogin.css('left',($(window).width()-oLogin.outerWidth())/2);oLogin.css('top',($(window).width()-oLogin.outerHeight())/2);當滾動條滾動時候，彈窗的位置變化：
$(window).on("resize scroll",function(){oLogin.css('left',($(window).width()-oLogin.outerWidth())/2+$(window).scrollLeft());oLogin.css('top',($(window).width()-oLogin.outerHeight())/2+$(window).scrollTop()); })以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
