Question

我正在使用jquery打开弹出窗口。我的弹出内容由图像和文本组成。

当我点击pop1时，我得到了我的pop1内容。当我点击pop2几秒钟时，我看到我的pop1内容，然后我的pop2加载。我该如何解决这个问题？

我的弹出代码：

$(document).ready(function(){

///////LINKS - POPUP//////// 
 $('#all').delegate('a.pop-lnk', 'click', function(){
  var page = $(this).attr('id');

  $('#popup').empty();

  $('#gr-out').css({ opacity: 0.7, 'width':$(document).width(),'height':$(document).height()}).show();
  $('#popup').css({'display': 'block'});
  $('#popup').load("../phpHandler.php?page="+ page);
 })

 $('body').delegate('.hide-it', 'click', function(){ 
  $('.hide-it').hide();
    })
});

我处理链接的php（phpHandler）：

<?php
 $page = $_GET['page'];
 $pages = array('pop1',
                'pop2');

 if (!empty($page)) {
  if(in_array($page,$pages)){
   $page .= '.php';
   require_once('../' . $page . '');
  }
  else require_once('../err.php');
 }
 else require_once('../err.php');
?>

Answer 1

这是因为您首先显示包含先前加载的pop1内容的元素

$('#gr-out').css({ opacity: 0.7, 'width':$(document).width(),'height':$(document).height()}).show();
$('#popup').css({'display': 'block'});

然后开始加载新内容

$('#popup').load("../phpHandler.php?page="+ page);

这不是缓存，而是时间问题：）

Answer 2

在.load回调中显示弹出窗口，以便在显示之前加载html。

$('#popup').load("../phpHandler.php?page="+ page, function(){
    $('#popup').css({'display': 'block'});
});

Answer 3

隐藏模态时，请清除其内容。

$('body').delegate('.hide-it', 'click', function(){ 
        $('.hide-it').hide();
        $('#popup').empty();
    })
});

图像缓存清除问题

3 个答案: