关闭模态窗口并在同一函数中清理哈希

时间:2016-10-17 16:42:18

标签: javascript jquery ajax hash

我通过ajax将内容加载到div中。这会将网站哈希值更改为#WhateverYouClickedOn,这很好。一旦用户单击关闭此模式窗口的x按钮,我想清理哈希。 我怎么能这样做?

这是我的代码

调用Ajax

function getPage() {
    return window.location.hash.replace(/^#/, '');
}

function updatePage(page, html) {

    var navItems = [
        'products',
        'about',
        'storelocator',
        'media',
        'faq',
        'contact'
    ];
$('.overlay').trigger('show');
    // Remove the arrow from the previously selected item
    if (navItems.indexOf(page) != -1) {
        $(".w-container .w-nav-menu a").removeClass("active");
    }

    $("#" + page + "-link").addClass("active");

    $('.content')
        .hide()
        .html(html)
        .fadeIn();
}

function retrieveContent() {
     $('.overlay').trigger('show');
    var page = getPage();

if (!page) {   
        return;
    }

    $.ajax({
        type: "POST",
        url: "./load.php",
        data: 'page='+page,
        dataType: "html",

        beforeSend: function() {
            $('#canvasloader-container.wrapper').show();
        },
        complete: function() {
            $('#canvasloader-container.wrapper').hide();
        },                
        success: function(msg){
            if (msg) {
                updatePage(page, msg);
            }
        }
    });
}

$(function() {
    retrieveContent();

    window.onhashchange = retrieveContent;
});

叠加/模态窗口

(function($) { 
  $.fn.overlay = function() {
    overlay = $('.overlay');

    overlay.ready(function() {
      overlay.on('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd', function(e) {
        if (!$(this).hasClass('shown')) return $(this).css('visibility', 'hidden');
      });

      overlay.on('show', function() {
        $(this).css('visibility', 'visible');
        $(this).addClass('shown');

        return true;
      });
     overlay.on('hide', function() {
        $(this).removeClass('shown');
        $(".content").html("")
        return true;

      });
     overlay.on('hide', function() {
       $(".w-container .w-nav-menu a").removeClass('active'); // Remove the active class when overlay is off
       $(".content").html("")
       return true;

     });


      $('a[data-overlay-trigger=""]').on('click', function() {
        overlay.trigger('show');
      });

      $('a[data-overlay-trigger]:not([data-overlay-trigger=""])').on('click', function() {
        $('.overlay.' + $(this).attr('data-overlay-trigger')).trigger('show');
      });
    })
  };
})(jQuery);

0 个答案:

没有答案