Jquery和ajax开发案例之---浮动窗口

最新推荐文章于 2018-03-27 10:35:51 发布

zlcook

最新推荐文章于 2018-03-27 10:35:51 发布

阅读量1.6k

点赞数 1

分类专栏：前端框架 java 文章标签： jquery ajax 浮动窗口

本文链接：https://blog.youkuaiyun.com/zl594389970/article/details/24117633

版权

java 同时被 2 个专栏收录

7 篇文章

订阅专栏

前端框架

5 篇文章

订阅专栏

案例(浮动窗口、动态股票信息、弹出菜单、可编辑的表格、自动补全输入框)下载地址：

http://download.youkuaiyun.com/detail/zl594389970/7218687

效果图：

页面代码：

<head>
		<meta http-equiv="Content-Type" content="text/html; charset=GBK">
		<title>JQuery实例：浮动窗口</title>
		<script type="text/javascript"  src="js/jquery-1.3.1.js"></script>
		<script type="text/javascript"  src="js/jquerywin.js"></script>
		<link rel="stylesheet" type="text/css" href="css/win.css">
		
	</head>
	<body>
		
		<a οnclick="showwin()" href="#">显示浮动窗口</a>
		<div id="win" >
			<div id="title">我是标题<span id="close" οnclick="hide()">X</span></div>
			<div id="content">我是内容</div>
		</div>
	</body>

jquerywin.js代码：

//显示浮动窗口
function showwin()
{
	//找到窗口节点
	var windNode = $("#win");
	//让div显示出来
	windNode.fadeIn("slow"); 
	//windNode.toggle();
//	windNode.css("display","block");

}
function hide(){
	var windNode = $("#win")
	windNode.fadeOut("slow"); 
	//windNode.css("display","none");
}

win.css代码：

#win{
	   border: 3px solid #FF0000;
    width: 400px;
    height: 300px;
    position: absolute;
    left: 400px;
    top: 200px;
    display: none; 
}

#title{
	background-color: blue;;
	color: white;
	padding-left: 3px;
    padding-top: 4px;
}
#content{
	
	padding-left: 4px;
    padding-top: 5px;
}
#close{
	 margin-left: 290px;
	 cursor: pointer;
}