jquery浮动窗口 – 源码巴士

html中

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>itcast.cn的JQuery实例1:浮动窗口</title> <mce:script type="text/javascript" src="jslib/jquerywin.js" mce_src="jslib/jquerywin.js"></mce:script> <mce:script type="text/javascript" src="jslib/jquery-1.2.6.js" mce_src="jslib/jquery-1.2.6.js"></mce:script> <link type="text/css" rel="stylesheet" href="css/win.css" mce_href="css/win.css"> </head> <body> <a οnclick="showwin()" href="#" mce_href="#">显示浮动窗口</a>   <div id="win"> <div id="title">我是标题栏!!<span id="close" οnclick="hide()">X</span></div> <div id="content">我是一个窗口哦！！</div> </div> </body> </html>
js中

//显示浮动窗口的方法 function showwin(){ //1 找到对应的div节点 var windNode = $("#win"); //2 让div对应的窗口显示出来 //方法1.修改节点的css,让窗口显示出来 //windNode.css("display","block"); //方法2：利用Jquery的show方法 //windNode.show("slow"); //方法3: 利用Jquery的fadeIn方法 windNode.fadeIn("slow"); } //隐藏窗口的方法 function hide(){ //1 找到窗口对应的节点 var windNode = $("#win"); //2 将窗口隐藏起来 //方法1.修改节点的css,让窗口显示出来 //windNode.css("display","none"); //方法2：利用Jquery的show方法 //windNode.hide("slow"); //方法3: 利用Jquery的fadeIn方法 windNode.fadeOut("slow"); }
css中

/*id选择器*/ #win{ /*希望窗口有边框*/ border: 1px red solid; /*希望窗口宽度和高度固定，不要太大*/ width:300px; height:200px; /*控制窗体的位置*/ position: absolute;/*绝对定位*/ top: 100px; left:350px; /*窗口开始时不可见*/ display: none; } /*控制标题栏的样式*/ #title{ /*控制标题栏的字体色*/ color: yellow; /*控制标题栏的背景色*/ background-color: blue; padding-left: 3px; } /*控制内容区域的样式*/ #content{ padding-left: 3px; padding-top: 5px; } /*控制关闭按钮的位置*/ #close{ /*使用关闭按钮向右侧移动*/ margin-left:188px; /*让鼠标进入时可以显示小手，告知用户点击操作*/ cursor:pointer; }

原文链接：https://blog.csdn.net/bart2011/article/details/6394799