JQuery学习一
学习JQuery,如何创建、调用和关闭模式窗口。
(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('<a href="#" class="close"><img src="grfx/close_button.png" class="close_button" title="Close Window" alt="Close" /></a>'); /* * define the margins so that 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('<div id="modalShade"></div>'); // 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; });
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。