如何使用fancybox加載php頁面？

Question

我搜索了很多，但我找不到答案。

在我contact.php我有這樣的代碼：

<a class="mailform" href="submit.php">Click</a> 

我有這樣的劇本，但它不工作：

$('.mailform').click(function() { 
    $.fancybox(
     { 
      'autoDimensions' : false, 
      'width'     : 350, 
      'height'    : 'auto', 
      'transitionIn'  : 'none', 
      'transitionOut'  : 'none', 
      'ajax' : { 
       cache : false, 
       url  : this.href 
      } 
     } 
    ); 
}); 

你能幫助我嗎？

Answer 1

您需要返回false可以通過

$('.mailform').click(function() { 

    var myUrl = $(this).attr('href'); 

    $.fancybox(
     { 
      'autoDimensions' : false, 
      'width'    : 350, 
      'height'   : 'auto', 
      'transitionIn'  : 'none', 
      'transitionOut'  : 'none', 
      'ajax' : { 
       cache : false, 
       url  : myUrl 
      } 
     } 
    ); 

    return false; 
}); 

Answer 2

我懷疑你的問題在這裏與魔術this變量的範圍有關。在您的代碼中，this指的是您已分配給'ajax':的對象字面值。爲了做我認爲你正在嘗試做的事情，你將需要另一個臨時變量。按照慣例，我們稱之爲變量that。您還需要從您的點擊處理程序返回false，停止瀏覽器跟隨主窗口中的鏈接。

$('.mailform').click(function() { 
    // Here, `this` refers to the <a> DOM element, so we create a copy of it 
    // and store it in `that` 
    var that = this; 
    $.fancybox({ 
     // Now `this` refers to the object you are passing to fancybox() 
     'autoDimensions': false, 
     'width'   : 350, 
     'height'  : 'auto', 
     'transitionIn' : 'none', 
     'transitionOut' : 'none', 
     'ajax'   : { 
      // Now `this` refers to the object you are assigning to 'ajax': 
      cache : false, 
      url  : that.href // Use `that` instead of `this` 
     } 
    }); 
    // We also need to return false, to stop the browser following the link 
    return false; 
});