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('vc2UgV2luZG93" alt="Close" />');
        /* 
         * 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 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; });

發佈留言