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 相关文章推荐
原生Js实现按的数据源均分时间点幻灯片效果(已封装)
Dec 28 Javascript
非常棒的10款jQuery 幻灯片插件
Jun 14 Javascript
js弹出模式对话框,并接收回传值的方法
Mar 12 Javascript
js之ActiveX控件使用说明 new ActiveXObject()
Mar 03 Javascript
用js的document.write输出的广告无阻塞加载的方法
Jun 05 Javascript
Jquery ajax 同步阻塞引起的UI线程阻塞问题
Nov 17 Javascript
开源免费天气预报接口API及全国所有地区代码(国家气象局提供)
Dec 26 Javascript
非常优秀的JS图片轮播插件Swiper的用法
Jan 03 Javascript
详解Vue组件之间的数据通信实例
Jun 17 Javascript
JS通过位运算实现权限加解密
Aug 14 Javascript
jQuery操作attr、prop、val()/text()/html()、class属性
May 23 jQuery
Vue组件模板的几种书写形式(3种)
Feb 19 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 将bmp图片转为jpg等其他任意格式的图片
2009/06/29 PHP
PHP实现的策略模式示例
2019/03/20 PHP
PHP开发API接口签名生成及验证操作示例
2020/05/27 PHP
JavaScript replace(rgExp,fn)正则替换的用法
2010/03/04 Javascript
jQuery 翻牌或百叶窗效果(内容三秒自动切换)
2012/06/14 Javascript
JavaScript闭包函数访问外部变量的方法
2014/08/27 Javascript
禁止iframe脚本弹出的窗口覆盖了父窗口的方法
2014/09/06 Javascript
使用JavaScript和C#中获得referer
2014/11/14 Javascript
JavaScript实现为指定对象添加多个事件处理程序的方法
2015/04/17 Javascript
在Web项目中引入Jquery插件报错的完美解决方案(图解)
2016/09/19 Javascript
使用JS代码实现点击按钮下载文件
2016/11/12 Javascript
Angular使用$http.jsonp发送跨站请求的方法
2017/03/16 Javascript
AngularJS实现的回到顶部指令功能实例
2017/05/17 Javascript
requirejs + vue 项目搭建详解
2017/06/16 Javascript
React Native实现地址挑选器功能
2017/10/24 Javascript
vue源码学习之Object.defineProperty对象属性监听
2018/05/30 Javascript
基于rollup的组件库打包体积优化小结
2018/06/18 Javascript
node将geojson转shp返回给前端的实现方法
2019/05/29 Javascript
vue实现带过渡效果的下拉菜单功能
2020/02/19 Javascript
Python3.0与2.X版本的区别实例分析
2014/08/25 Python
Python的Flask框架应用程序实现使用QQ账号登录的方法
2016/06/07 Python
Python3.5 处理文本txt,删除不需要的行方法
2018/12/10 Python
python 实现一个简单的线性回归案例
2020/12/17 Python
python中的时区问题
2021/01/14 Python
CSS3弹性布局内容对齐(justify-content)属性使用详解
2017/07/31 HTML / CSS
详解HTML5将footer置于页面最底部的方法(CSS+JS)
2018/10/11 HTML / CSS
卡西欧B级产品官方网站:Casio Outlet
2018/05/22 全球购物
80年代复古T恤:TruffleShuffle
2018/07/02 全球购物
应聘教师推荐信
2013/10/31 职场文书
留学经费担保书
2014/05/12 职场文书
经理任命书模板
2014/06/06 职场文书
五月的鲜花活动方案
2014/08/21 职场文书
2020年个人安全保证书参考模板
2020/01/08 职场文书
Python控制台输出俄罗斯方块移动和旋转功能
2021/04/18 Python
python 对图片进行简单的处理
2021/06/23 Python
Go调用Rust方法及外部函数接口前置
2022/06/14 Golang