<!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>
<a onclick="showwin()" href="#">显示浮动窗口</a>
<!--如何显示一个弹出窗口,可以使用div表示-->
<!--需要用css来改变这个div的样子-->
<!--标题栏和内容区-->
<div id="win">
<div id="title">标题栏<span id="close" onclick="hide()">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;
}
分享到：
相关推荐
这是一款基于jQuery的仿Win 7风格的弹出窗口，关于弹出窗口我们在之前已经分享过不少了，比如这款jQuery对话框插件 支持拖拽，也支持各种类型的弹出对话框。今天分享的这款win 7风格窗口模拟效果非常逼真，支持最大...
基于jQuery的弹出警告对话框美化插件(警告，确认和提示) 这个Jquery插件的目的是替代JavaScript的标准函数alert()，confirm（），和 prompt（）。这个插件有 如下这些特点： 1：这个插件可以使你可以...
jQuery版的仿Windows弹出窗口特效，实际上就是一个弹出浮动层效果，和引前有一款JS仿Windows窗口十分相似，前一段由纯JS来实现，这一款由jquery插件来实现。 用此插件实现的弹出式窗口均可以被任意拖动，都有标题...
主要介绍了jQuery实现的模拟弹出窗口功能,结合实例形式分析了jQuery弹出窗口的初始化、坐标、背景设置等相关操作技巧,需要的朋友可以参考下
使用jquery实现的仿人人网高校级联选择，但无国家选择，学校数据保存在JS中
有兴趣刚需的可以自己下载，非常实用的代码，可以完美运行，有能力的还可以二次修改！
Win7 Aero弹出窗口效果代码基于jquery-AeroWindow.js和jquery-1.4.2.min.js制作，模拟Windows7桌面风格，弹出窗口打开关闭放大缩小动画特效。
jquery-lwd是一款轻量级的基于jQuery UI的模拟windows窗口插件。该插件可以模拟windows窗口，对窗口进行最大化，最小化，拖动等操作。并提供windows2000经典主题效果。
经典jquery例子，这里包含可编辑表格、div制作弹出窗口、模拟动态股票、动态菜单例子、自动补全还有div实现jquery动态滑动效果。
多功能弹出窗口插件，轻量级的，模拟灯箱/模态窗口以图像。 支持嵌入You Tube，Vimeo，每日运动和iframes以及html内容。 使用方法： 1、链接两个'litebox.css '，'images-loaded.js'和'litebox.js'文件...
JQuery第一课-tab标签页、JQuery第二课-多张图的无缝滚动、JQuery第三课-图片轮播、JQuery第四课-下拉菜单(无限级)、JQuery第五课-弹出窗口、JQuery第六课-拖拽、JQuery第七课-模拟滚动条、JQuery第八课-放大镜、...
1. Lightview Lightview是一个基于Prototype与Script.aculo.us开发，用于创建可以覆盖整个页面的模式对话框。展示的内容不仅可以是图片、文字、网页...风声JS窗口为模拟WEB弹出窗口和对话框提供一种方案。程序基于 Jav
内容索引:脚本资源,jQuery,弹出层 jquery 仿QQ校友的DIV模拟窗口效果，就是一个弹出式窗口，实际上是基于层的，用JS控制DIV来弹出，主要应用在博客中。
Win7 Aero弹出窗口效果代码基于jquery-AeroWindow.js和jquery-1.4.2.min.js制作，模拟Windows7桌面风格，弹出窗口打开关闭放大缩小动画特效。
一款支持拖拽的jQuery层弹出窗口(TipsWindown1.0版本)下载 10.分享一款jquery Ajax弹出对话框插件SimpleModal 11.下载jQuery对话框Dialog弹出层插件演示与使用说明 12.实用jQuery漂亮浮动层插件,精美Dialog...
1.12 强制在弹出窗口中打开链接 1.13 平滑滚动页面到某个锚点 1.14 阻止文本行换行 1.15 实现iframe高度自适应 1.16 实现左右div自适应相同高度 1.17 获取鼠标在屏幕中的坐标 1.18 获取鼠标在窗口客户区中的坐标 ...