jQuery制作的别致导航有阴影背景高亮模式窗口


Posted in Javascript onApril 15, 2014

效果图:
jQuery制作的别致导航有阴影背景高亮模式窗口 
html链接:

<a href="#" rel="registerwindow" class="model">注册</a>

css:
img{ border:0px;} 
#registerwindow{ width:600px; height:400px; top:50px; right:100px; background:#FFF; display:none; border:5px #999 solid; position:absolute; z-index:999;} 
#modelshade{width:100%; height:100%; background:#000; display:none; position:absolute; top:0px; z-index:0;}

一:创建和调用模式窗口
<div id="registerwindow"> 
<h1 align="center">注册</h1><br> 
<div style="width:250px; margin:0 auto;"> 
<form> 
用户名:<input type="text" name="username" size="20"><br> 
密 码:<input type="password" name="password" size="20"><br> 
<input type="submit" name="submit" value="注册" > 
</form> 
</div> 
</div>

1.创建一个jQuery语句,选择具有一类模式的描记标记
<script> 
$('document').ready(function(){ 
<!-- 注册model start--> 
$('a.model').click(function(){

2.使用下面的函数,将当前项目中的变量存储为rel属性的值
var modelID = $(this).attr('rel');

3.设置模式窗口的效果,并添加关闭窗口的图片链接
$('#'+modelID).fadeIn(2000).prepend('<a href="#" class="close"><img src="images/close.png" class="close_button" title="close window" alt="close"></a>'); 
$('.close_button').css({'margin-left':'535px','margin-top':'0px'});

二:创建阴影背景
$('#modelshade').css('opacity','0.8').fadeIn(2000);

三:关闭模式窗口
$('a.close,#modelshade').click(function(){ 
var thismodelID= $('a.close').parent().attr('id'); 
$('#modelshade,#'+thismodelID).fadeOut(function(){ 
$('a.close,#modelshade').remove(); 
}); 
return false; 
});

关闭点击功能的失败连接,该方法将保持连接并尝试载入另一个页面到浏览器
return false; }); 
<!-- 注册model end--> 
lt;/script>
Javascript 相关文章推荐
关于javascript中的parseInt使用技巧
Sep 03 Javascript
IE6下JS动态设置图片src地址问题
Jan 08 Javascript
jquery中的事件处理详细介绍
Jun 24 Javascript
JavaScript实现判断图片是否加载完成的3种方法整理
Mar 13 Javascript
JS动态改变表格边框宽度的方法
Mar 31 Javascript
JavaScript中的fontsize()方法使用详解
Jun 08 Javascript
javascript中的Function.prototye.bind
Jun 25 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化(二)
Feb 16 Javascript
javascript基于原型链的继承及call和apply函数用法分析
Dec 15 Javascript
微信小程序实现打卡日历功能
Sep 21 Javascript
微信小程序的引导页实现代码
Jun 24 Javascript
js实现从右往左匀速显示图片(无缝轮播)
Jun 29 Javascript
JS比较2个日期间隔的示例代码
Apr 15 #Javascript
模拟一个类似百度google的模糊搜索下拉列表
Apr 15 #Javascript
关闭浏览器窗口弹出提示框并且可以控制其失效
Apr 15 #Javascript
使用JavaScript的ActiveXObject对象检测应用程序是否安装的方法
Apr 15 #Javascript
jquery新的绑定事件机制on方法的使用方法
Apr 15 #Javascript
jquery datepicker参数介绍和示例
Apr 15 #Javascript
javascript调试之DOM断点调试法使用技巧分享
Apr 15 #Javascript
You might like
检查php文件中是否含有bom的函数
2012/05/31 PHP
php中用socket模拟http中post或者get提交数据的示例代码
2013/08/08 PHP
php中unserialize返回false的解决方法
2014/09/22 PHP
老生常谈PHP面向对象之解释器模式
2017/05/17 PHP
laravel 数据验证规则详解
2019/10/23 PHP
刷新页面实现方式总结(HTML,ASP,JS)
2008/11/13 Javascript
JS兼容浏览器的导出Excel(CSV)文件的方法
2014/05/03 Javascript
js闭包所用的场合以及优缺点分析
2015/06/22 Javascript
JavaScript 字符串常用操作小结(非常实用)
2016/11/30 Javascript
原生javascript上传图片带进度条【实例分享】
2017/04/06 Javascript
详解小程序rich-text对富文本支持方案
2018/11/28 Javascript
layui中的switch开关实现方法
2019/09/03 Javascript
javascript 原型与原型链的理解及实例分析
2019/11/23 Javascript
[55:03]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第二场 11.20
2020/11/20 DOTA
Python在信息学竞赛中的运用及Python的基本用法(详解)
2017/08/15 Python
解决DataFrame排序sort的问题
2018/06/07 Python
用Python将结果保存为xlsx的方法
2019/01/28 Python
python实现杨氏矩阵查找
2019/03/02 Python
Python爬取新型冠状病毒“谣言”新闻进行数据分析
2020/02/16 Python
python 通过邮件控制实现远程控制电脑操作
2020/03/16 Python
Python3+selenium实现cookie免密登录的示例代码
2020/03/18 Python
python利用os模块编写文件复制功能——copy()函数用法
2020/07/13 Python
Python操作dict时避免出现KeyError的几种解决方法
2020/09/20 Python
Python调用高德API实现批量地址转经纬度并写入表格的功能
2021/01/12 Python
CSS3 calc()会计算属性详解
2018/02/27 HTML / CSS
MADE法国:提供原创设计师家具
2018/09/18 全球购物
构建高效课堂实施方案
2014/03/13 职场文书
考生诚信考试承诺书
2014/05/23 职场文书
新农村建设典型材料
2014/05/31 职场文书
本科毕业论文导师评语
2014/12/31 职场文书
裁员通知
2015/04/25 职场文书
认识实习感想
2015/08/10 职场文书
大学生党课感想
2015/08/11 职场文书
企业年会祝酒词
2015/08/11 职场文书
医护人员继续教育学习心得体会
2016/01/19 职场文书
Python实现打乒乓小游戏
2021/09/25 Python