javascript代码实例教程-JQueryѧϰһ

发布时间:2019-01-22 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-JQueryѧϰһ脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

学习jquery,如何创建、调用和关闭模式窗口。

@H_304_5@(document).ready(function() { /* Background Resizer-背景自适应浏览器大小 */ $("#bodyBackground").ezBgResize(); /* modal windows */ $('a.modal').click(function() { /*attr-获取属性值,例如tagName*/ VAR modalID = $(this).attr('rel'); // get the name of the modal /* fade in the modal window and add a close button to IT */ /* *fadein-淡入已隐藏的元素 *PRePEnd-在被选元素的开头插入内容 */ $('#' + modalID).fadeIn().prepend('

javascript代码实例教程-JQueryѧϰһ

vc2UgV2luZG93" alt="Close" />'); /* * define the margins so t@R_406_2570@ the modal is centered properly on the screen * we add 80px to the height/width to accomodate for the padding and border * width defined in the css */ var modalMarginTop = ($('#' + modalID).height() + 80) / 2; var modalMarginLeft = ($('#' + modalID).width() + 80) / 2; /* apply the margins to the modal window */ $('#' + modalID).css({ ';margin-top' : -modalMarginTop, 'margin-left' : -modalMarginLeft }); /* fade in the shade! (tired of the cheesy jokes yet?) */ /*append-被选元素的结尾插入内容。*/ $('body').append('

'); // add the shade layer to bottom of the body $('#modalShade').css('opacity', 0.7).fadeIn(); // set the opacity with jQuery to avoid all of the nasty CSS needed for IE return false; // keep the link From acting naturally }); /* * close the modal and pull down the shade */ /*live-绑定事件函数,语法是$(selector).live(event,data,function),live函数不支持DOM遍历*/ $('a.close, #modalShade').live('click', function() { // clicking on the close or shade layer /*parent-返回被选元素的直接父元素,方法只会向上一级对 DOM 树进行遍历*/ var thisModalID = $('a.close').parent().attr('id'); $('#modalShade, #'+thisModalID).fadeOut(function() { /* remove-删除被选元素(及其子元素),该方法也可接受一个参数,允许您对被删元素进行过滤。例如指定过滤class为del的remove('.del')*/ $('#modalShade, a.close').remove(); // remove the shade and the close button }); return false; });

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-JQueryѧϰһ全部内容,希望文章能够帮你解决javascript代码实例教程-JQueryѧϰһ所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。