<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> *{ margin:0; padding:0;} #login{ width:300px; height:300px; border:1px #000 solid; position:absolute;} #close{ position:absolute; right:0; top:0;} </style> <script type="text/javascript" src="jquery-1.10.1.min.js"></script> <script> $(function(){ //var oDiv = $('<div>div</div>'); //$('body').append( oDiv ); $('#input1').click(function(){ var oLogin = $('<div id="login"><p>用户名:<input type="text" /></p><p>密码:<input type="text" /></p><div id="close">X</div></div>'); $('body').append( oLogin ); oLogin.css('left' , ($(window).width() - oLogin.outerWidth())/2 ); oLogin.css('top' , ($(window).height() - oLogin.outerHeight())/2+$(window).scrollTop()); $('#close').click(function(){ oLogin.remove(); }); $(window).on('resize scroll',function(){ oLogin.css('left' , ($(window).width() - oLogin.outerWidth())/2 ); oLogin.css('top' , ($(window).height() - oLogin.outerHeight())/2 + $(window).scrollTop() ); }); }); }); </script> </head> <body style="height:2000px;"> <input type="button" value="点击" id="input1" style="margin-top: 800px;"/> <!--<div id="login"> <p>用户名:<input type="text" /></p> <p>密码:<input type="text" /></p> <div id="close">X</div> </div>--> </body> </html>
说明:此代码是参考秒味视频教程改写。
原来的教程中的代码实现是有bug,具体为红色的字体。
在项目中遇到的情况是,触发弹出的窗体的元素在点击的时候,其父类windows已经有滚动条啦,如果不加速滚动的距离就会出现距离的问题。