JQuery学习一

最新推荐文章于 2025-02-25 09:51:17 发布

原创最新推荐文章于 2025-02-25 09:51:17 发布 · 1.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#JQuery #模式窗口

Javascript 专栏收录该内容

31 篇文章

订阅专栏

本文介绍了如何使用JQuery创建模式窗口，包括调用和关闭模式窗口的方法。通过简单的JavaScript代码实现了模式窗口的显示和关闭功能，并添加了遮罩层以增强用户体验。

学习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;
    });