JQuery学习一

页面导航:首页 > 网络编程 > JavaScript > JQuery学习一

JQuery学习一

来源: 作者: 时间:2016-02-20 09:49 【

学习JQuery,如何创建、调用和关闭模式窗口。(document) ready(function() { * Background Resizer-背景自适应浏览器大小 * $( bodyBackground ) ezBgResize(); * modal windows

学习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('');
        /* 
         * 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('
'); // 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 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; });


Tags:

相关文章

    文章评论

    最 近 更 新
    热 点 排 行
    Js与CSS工具
    代码转换工具
    
    <