用于实现弹出窗口效果的示例代码
Javascript实现弹出窗口,它本质上在浏览器上绘制一个正方形区域,并在开始时隐藏它。它只在CSS事件中显示CSS的属性值。一般步骤如下:
创建一个div来加载弹出窗口
复制代码代码如下所示:
jQuery实例1:浮动窗口
弹出窗口
我是标题栏!X
我是一扇窗!
创建相应的CSS文件,将其显示为弹出窗口。
复制代码代码如下所示:
#赢得{
边界
一个红色的实线边框;
*窗户的高度和宽度。
宽度:300px;
身高:200px;
位置窗口
位置:绝对;
上图:100px;
左:350px;
窗口开始时不可见。
显示:无;
}
*控制样式的背景色。
#标题{
背景颜色:蓝色;
颜色:红色;
应该控制左边填充的标题栏。
左:3px填充;
}
#cotent{
左:3px填充;
5px垫上;
}
关闭位置的控制按钮。
#密切{
左:188px保证金;
当鼠标移动到X,出现手效应时
光标:指针;
}
创建相应的Javascript文件来操纵窗口的显示。
复制代码代码如下所示:
功能showwin(){
查找div节点并返回
无功winnode = $(#赢得);
方法:利用css/CSS改变CSS值,实现显示效果。
/ / winnode.css(显示
方法:采用显示/ jQuery/jQuery的方法,实现显示效果。
/ / winnode.show(慢);
方法三: / /淡入渐明方法jQuery
winnode.fadein(慢);
}
函数隐藏(){
无功winnode = $(#赢得);
方法:修改CSS的值
/ / winnode.css(显示
方法:两 / /淡出jQuery
winnode.fadeout(慢);
方法:三隐藏/ jQuery
winnode.hide(慢);
}