脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-jQuery制作的别致导航有阴影背景高亮模式窗口,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。
jQuery制作的别致导航有阴影背景高亮模式窗口,效果图:
htML链接:
. 代码如下:
<a href="#" rel="registerwindow" class="model">注册</a>
. 代码如下:
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;}
. 代码如下:
<p id="registerwindow">
<h1 align="center">注册</h1><br>
<p 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>
</p>
</p>
. 代码如下:
<script>
$('document').ready(function(){
<!-- 注册model start-->
$('a.model').click(function(){
. 代码如下:
VAR modelID = $(this).attr('rel');
. 代码如下:
$('#'+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>
觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!
以上是脚本宝典为你收集整理的javascript代码实例教程-jQuery制作的别致导航有阴影背景高亮模式窗口全部内容,希望文章能够帮你解决javascript代码实例教程-jQuery制作的别致导航有阴影背景高亮模式窗口所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。