关闭popify模式并保持页面中的滚动位置

close popify modal and maintain scroll position in page

本文关键字:滚动 位置 popify 模式 关闭      更新时间:2023-09-26

我的关闭按钮函数(通过下面的主插件文件)刷新到页面的顶部;我需要在长垂直滚动页面中保持位置,当单击关闭按钮退出弹出窗口。

HTML for button:
    <a href="" class="closePopup westonClose">X</a>

主插件JS:

// JavaScript Document
/** A modal pop-up.
    Basic usage.
    --------------------------------------------------------------------
    HTML elemets that the plugin will create on document ready.
    <!--
        An overlay that will act as a background for the pop-ups.
        Only one will be added to the DOM.
     -->
    <div id="flyPopifyOverlay" class="flyPopifyHide"><!-- Empty. --></div>
    <!--
        A wrapper element for each pop-up's content.
    -->
    <div class="flyPopifyOverlayContent" class="flyPopifyHide">
    </div>
    --------------------------------------------------------------------
    The following options can be pased to the plugin:
    Option name: default value
    opacity: 1
        The popup's background opacity.
    minY: 0
        The highest the pop-up can follow the scroll vertically
        relative to the document.
    maxY: $(document).height() - popup.height()
        The lowest the pop-up can follow the scroll vertically
        relative to the document.
    --------------------------------------------------------------------
    The pop-up's wrapper element ('.flyPopifyOverlayContent') will respond
    to the following events:
    fly-popify-show:
        Displays the pop-up.
    fly-popify-hide:
        Hides the pop-up.
    There are 2 (two) helper plugin functions: popifyOpen and popifyClose.
    They, respectivley open and close the pop-ups they're invoked on.
    Note that these helper functions can be called on the .flyPopifyOverlayContent
    elements themselves or any descendant elements.
    <code>
        // Popify some content.
        $('#content').popify();
        // Will open the pop-up in which the a elements reside.
        $('#content .comeClass a').popifyOpen();
        // Same as the above.
        $('#content').popifyClose();
        // Will open all pop-ups.
        $('.flyPopifyOverlayContent').popifyOpen();
        // No effect.
        $('body').popifyOpen();
    </code>
*/
var jqPopify = false;
if ('undefined' != typeof jqFly) {
    jqPopify = jqFly;
} else if ('undefined' != typeof jQuery) {  
    jqPopify = jQuery;
}
(function($){
    // Default options.
    var defaultSettings = {
        // The popup's background opacity.
        opacity: 0,
        // The highest the pop-up can follow the scroll vertically.
        minY: 0,
        // The lowest the pop-up can follow the scroll vertically.
        maxY: null // Note that this is just a temp. Will get calculcated for each individual pop-up.
    };
    var inlineStyles = {
        overlay: {
            display: 'none',
            position: 'absolute',
            top: '0',
            left: '0',
            opacity: '0.50',
            background: '#000',
            zIndex: '-100'
        },
        overlayContent: {
            display: 'block',
            opacity:0,
            position: 'absolute',
            top: '0',
            left: '0',
            zIndex: '-100'
        }
    };
    function showLightbox(e) {
        if (!$('#flyPopifyOverlay').hasClass('flyPopifyHide')) {
            return;
        }
        $('#flyPopifyOverlay')
            .removeClass('flyPopifyHide')
            .stop(true)
            .clearQueue()
            .show()
            //.animate({ opacity: 0.53 });
        $(this)
            .removeClass('flyPopifyHide')
            .stop(true)
            .clearQueue()
            .show();
            $(window).scroll();
        onWindowResize();
    };
    function hideLightbox(e) {
        var overlayContent = $(this);
        $(this)
            .addClass('flyPopifyHide')
            .stop(true)
            .clearQueue()
            .animate({ /*opacity: 0 */}, function() {
                $(overlayContent).hide();
            });
        $('#flyPopifyOverlay')
            .addClass('flyPopifyHide')
            .stop(true)
            .clearQueue()
            .animate({ /*opacity: 0*/ }, function() {
                $('#flyPopifyOverlay').hide();
            });
    };
    function onWindowResize(e) {
        $('#flyPopifyOverlay')
            // Pretty simple. What happens when overlay needs to be offseted?
            // Let's say it starts from 100th pixel to allow for navigation menu
            // interaction?
            .width($(document).width())
            .height($(document).height());
    };
    /**
     * onWindowScrollResize()
     *
     * Called when the viewport changes, for both positon (relative to [0,0])
     * and dimensions (width and height).
     */
    function onWindowScrollResize(e) {
        // There shouldn't be more then 1 (one) pop-up opened at a time in general,
        // so don't take into account the posibility of more the 1 opened.
        popup = $('.flyPopifyOverlayContent').not('.flyPopifyHide').first();
        if (!popup.size()) {
            return;
        }
        var toX = 0;
        var toY = 0;
        // Make sure the object is copied, otherwise we're modifing
        // the element's settings variable.
        var settings = popup.data('settings');//$.extend({}, popup.data('settings'));
        // Make sure used settings are correct.
        if (!settings.maxY) {
            settings.maxY = $(document).height() - $(popup).height();
        }
        if (!settings.maxX) {
            settings.maxX = $(document).width() - $(popup).width();
        }
        // Code repeats. It's simply lines.
        // TODO: Come up with a generic center(k1, k2, v1, v2, maxK1, maxK2).
        // k1 represents the line's left most point and k2 right most point.
        // v1 and v2 are the viewport's points (which is a line as well).
        // maxK1 and maxK2 are the bounds.
        // Vertical and horizontal alignemnt of the pop up is identical
        // due to both axis being the same - can be represented as
        // lines on a flat plane.
        // ************ Process horizontal. ************
        // Get the center X relative to the window's width.
        if (popup.width() < $(document).width()) {
            var x = parseInt($(window).width()/2);
                x -= parseInt(popup.width()/2);
                toX = $(window).scrollLeft() + x;
            if (popup.width() > $(window).width()) {
                var vpLeftX = $(window).scrollLeft();
                var vpRightX = vpLeftX + $(window).width();
                var pLeftX = parseInt(popup.css('left'));
                var pRightX = pLeftX + popup.width();
                if (vpLeftX < pLeftX) {
                    toX = $(window).scrollLeft();
                } else if (vpRightX > pRightX) {
                    toX = vpRightX - popup.width();
                } else {
                    toX = pLeftX;
                }
            }
            // Upper bound.
            if (settings.minX > toX) {
                toX = settings.minX;
            }
            // Lower bound.
            if (settings.maxX <= toX) {
                //toX = $(document).height() - popup.height() - 1;
                toX = settings.maxX - 1;
            }
        }
        // ************ END process horizontal. ************
        // ************ Process vertical. ************
        // If the height of the popup is less then the document,
        // only then it will be centered.
        if (popup.height() < $(document).height()) {
            // Get the center Y relative to the viewport's height.
            var y = parseInt($(window).height()/2);
                y -= parseInt(popup.height()/2);
                toY = $(window).scrollTop() + y;
            if (popup.height() > $(window).height()) {
                var vpTopY = $(window).scrollTop();
                var vpBottomY = vpTopY + $(window).height();
                var pTopY = parseInt(popup.css('top'));
                var pBottomY = pTopY + popup.height();
                if (vpTopY < pTopY) {
                    toY = $(window).scrollTop();
                } else if (vpBottomY > pBottomY) {
                    toY = vpBottomY - popup.height();
                } else {
                    toY = pTopY;
                }
            }
            // Upper bound.
            if (settings.minY > toY) {
                toY = settings.minY;
            }
            // Lower bound.
            if (settings.maxY <= toY) {
                //toY = $(document).height() - popup.height() - 1;
                toY = settings.maxY - 1;
            }
        }
        // ************ END process vertical. ************

        popup
        .stop(true)
        .clearQueue()
        .animate({ top: toY, left: toX, opacity: 1 }, 500);
    };
    $.fn.popifyOpen = function(options) {
        var settings = $.extend(true,
            // No settings for popifyOpen.
            {},
            // User supplied.
            options
        );
        $(this).trigger('fly-popify-show');
        $('#flyPopifyOverlay , .flyPopifyOverlayContent').css({'z-index':9998,opacity:1});
        $('#flyPopifyOverlay ').css({opacity: 0.5});
        return this;
    };
    $.fn.popifyClose = function(options) {
        var settings = $.extend(true,
            // No settings for popifyClse.
            {},
            // User supplied.
            options
        );
        $(this).trigger('fly-popify-hide');
        $('#flyPopifyOverlay , .flyPopifyOverlayContent, .closePopup').css({'z-index':-100,display:'none', opacity:0});
            window.location.reload();
        return this;
    };
    $.fn.popifyRefresh = function() {
        onWindowScrollResize();
        return this;
    };
    $.fn.popifyIsOpen = function() {
        if (1 == $(this).parents('.flyPopifyOverlayContent:first').size()) {
            return !$(this).parents('.flyPopifyOverlayContent:first').hasClass('flyPopifyHide');
        };
        return false;
    }
;   
    $.fn.popify = function(options) {
        // Merge (deep) user settings to defaults and produce
        // the global settings for this invokation.
        var settings = $.extend(true,
            defaultSettings,
            // User supplied.
            options
        );
        this.each(function(i, content) {
            var overlayContent = null;
            // Copy global settings.
            var tempSettings = $.extend({}, settings);
            // Determine maximum Y.
            if (tempSettings.maxY) {
                tempSettings.maxY = tempSettings.maxY - $(content).height();
                if (0 >= tempSettings.maxY ) {
                    tempSettings.maxY = 1;
                }
            }
            // Wrap in jQuery object.
            content = $(content);
            // Save the settings.
            content
                .detach();
            $('<div class="flyPopifyOverlayContent flyPopifyHide"></div>')
                .appendTo('body')
                .append(content);
            // Figure out the parent overlay element, since it has not id just use parent().
            overlayContent = $(content.parent());
            // Set initial opacity to 0.
            overlayContent
                .data('settings', tempSettings)
                .css(inlineStyles.overlayContent)
                // Setup default hide/show events.
                .bind('fly-popify-show', showLightbox)
                .bind('fly-popify-hide', hideLightbox);
        });
        $(window).trigger('resize');
        return this;
    };
    // These are the global actions and event handlers that have
    // to be carried out / defined before the plugin is invoked.
    $(document).ready(function(e){
        // If not already added, add the global overlay element.
        $('body').append('<div id="flyPopifyOverlay" class="flyPopifyHide"><!-- Empty. --></div>');
        $('#flyPopifyOverlay')
        .css(inlineStyles.overlay);
        $('#flyPopifyOverlay').bind('click', function(e) {
            $('.flyPopifyOverlayContent').not('.flyPopifyHide')
                .trigger('fly-popify-hide');
                window.location.reload(true);
        });
        $(window)
            .bind('resize', onWindowResize)
            .bind('resize scroll', onWindowScrollResize);
    });
})(jqPopify);

删除这里的window.location.reload行:

$.fn.popifyClose = function(options) {
        var settings = $.extend(true,
            // No settings for popifyClse.
            {},
            // User supplied.
            options
        );
        $(this).trigger('fly-popify-hide');
        $('#flyPopifyOverlay , .flyPopifyOverlayContent, .closePopup').css({'z-index':-100,display:'none', opacity:0});
        // REMOVE THIS LINE
        // window.location.reload();
        return this;
    };

如果你必须在关闭弹出窗口时重新加载页面,这里有一些与重新加载时保持滚动位置相关的主题:

刷新页面并保持滚动位置

在location.reload()之后保持滚动位置