<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> *{ margin:0; padding:0;} #login{ 400px; height:300px; position:absolute; border:1px #CCCCCC solid; padding:15px; } #close{ position:absolute; right:0px; top:0px; cursor:pointer; } </style> <script type="text/javascript" src="jquery-1.11.2.js"></script> <script> $(function () { $('#btn').click(function () { var ologin = $('<div id="login"><p>用户名：<input type="text"></p><p>密码：<input type="password"></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(); }) }) }) </script> </head> <body> <input type="button" id="btn" value="点击"> </body> </html>