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 相关文章推荐
SyntaxHighlighter语法高亮插件使用说明
Aug 14 Javascript
JS中的log对象获取以及debug的写法介绍
Mar 03 Javascript
JavaScript fontsize方法入门实例(按照指定的尺寸来显示字符串)
Oct 17 Javascript
javascript封装 Cookie 应用接口
Aug 07 Javascript
AngularJS初始化静态模板详解
Jan 14 Javascript
js编写当天简单日历效果【实现代码】
May 03 Javascript
jQuery无刷新上传之uploadify3.1简单使用
Jun 18 Javascript
Vue中父组件向子组件通信的方法
Jul 11 Javascript
Vue学习笔记进阶篇之vue-cli安装及介绍
Jul 18 Javascript
Vue对象赋值视图不更新问题及解决方法
Jun 03 Javascript
如何基于js判断浏览器版本
Feb 20 Javascript
微信小程序实现选择地址省市区三级联动
Jun 21 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中并发读写文件冲突的解决方案
2013/10/25 PHP
对PHP新手的一些建议(PHP学习经验总结)
2014/08/20 PHP
使用PHP编写发红包程序
2015/07/22 PHP
jquery实现控制表格行高亮实例
2013/06/05 Javascript
javascript在myeclipse中报错的解决方法
2013/10/29 Javascript
javascript的渐进增强与平稳退化浅谈
2013/11/12 Javascript
javascript中不等于的代码是什么怎么写
2013/12/29 Javascript
jQuery中关于ScrollableGridPlugin.js(固定表头)插件的使用逐步解析
2014/07/17 Javascript
js实现鼠标感应向下滑动隐藏菜单的方法
2015/02/20 Javascript
JavaScript脚本判断蜘蛛来源的方法
2015/09/22 Javascript
JQuery实现网页右侧随动广告特效
2016/01/17 Javascript
Jquery表单验证失败后不提交的解决方法
2016/10/18 Javascript
ajax级联菜单实现方法实例分析
2016/11/28 Javascript
分享一道关于闭包、bind和this的面试题
2017/02/20 Javascript
vue.js 左侧二级菜单显示与隐藏切换的实例代码
2017/05/23 Javascript
jQuery菜单实例(全选,反选,取消)
2017/08/28 jQuery
利用nvm管理多个版本的node.js与npm详解
2017/11/02 Javascript
原生JS实现ajax与ajax的跨域请求实例
2017/12/01 Javascript
详解可以用在VS Code中的正则表达式小技巧
2019/05/14 Javascript
微信小程序swiper禁止用户手动滑动代码实例
2019/08/23 Javascript
[06:43]DAC2018 4.5 SOLO赛 Maybe vs Paparazi
2018/04/06 DOTA
Python中列表、字典、元组、集合数据结构整理
2014/11/20 Python
python3中bytes和string之间的互相转换
2017/02/09 Python
理解Python中的绝对路径和相对路径
2017/08/30 Python
对numpy.append()里的axis的用法详解
2018/06/28 Python
使用Python opencv实现视频与图片的相互转换
2019/07/08 Python
在pytorch中对非叶节点的变量计算梯度实例
2020/01/10 Python
Python爬虫爬取、解析数据操作示例
2020/03/27 Python
Tensorflow tf.tile()的用法实例分析
2020/05/22 Python
CSS3教程:background-clip和background-origin
2008/10/17 HTML / CSS
Boston Proper官网:美国女装品牌
2017/10/30 全球购物
彪马日本官网:PUMA日本
2019/01/31 全球购物
英国儿童设计师服装的领先零售商:Base
2019/03/17 全球购物
业务部主管岗位职责
2014/01/29 职场文书
创先争优个人承诺书
2014/08/30 职场文书
webpack介绍使用配置教程详解webpack介绍和使用
2022/06/25 Javascript