jquery模拟的弹出窗口
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><title>浮动窗口</title> <script type="text/javascript" src="jslib/jquery.js"></script> <script type="text/javascript" src="jslib/jquerywin.js"></script> <link type="text/css" rel="stylesheet" href="css/win.css"/></head><body> <ahref="#">显示浮动窗口</a><!--如何显示一个弹出窗口,可以使用div表示--> <!--需要用css来改变这个div的样子--> <!--标题栏和内容区--> <div id="win"> <div id="title">标题栏<span id="close" >X</span></div> <div id="content" >我是一个窗口哦！！</div> </div></body></html>function showwin(){ //alert("测试方法"); //1.查找窗口对应的div节点 var winNode = $("#win"); //2.让div显示出来 //方法1修改节点css值,让其显示 //winNode.css("display","block"); //方法2 利用jquery的show方法 //winNode.show("slow"); //方法3 利用jquery的fadeIn方法 winNode.fadeIn("slow");}function hide(){ //1.查找窗口对应的div节点 var winNode = $("#win"); //2.让div显示出来 //方法1修改节点css值,让其显示 //winNode.css("display","none"); //方法2 利用jquery的hide方法 //winNode.hide("slow"); //方法3 利用jquery的fadeOut方法 winNode.fadeOut("slow");}
/*id选择器*/#win { /*窗口边框*/ border:1px red solid; /*窗口宽度高度固定*/ width:300px; height:200px; /*窗口定位*/ position:absolute;/*绝对定位*/ top:100px; left:300px; /*初始话不可见*/ display:none;}/*标题栏样式*/#title { background-color:blue; color:yellow; /*控制标题栏的左内边距*/ padding-left:3px;}#content { padding-left:3px; padding-top:5px;}#close{ margin-left:158px; /*鼠标进入显示小手状态*/ cursor:pointer;}
页:
[1]