jQuery的功能，從頁面加載內容到模態對話框

Question

我有以下功能，應該加載ID爲「內容」的模態對話框的任何鏈接與「#modal」的ID。

編輯

據我所知，ID必須是唯一的，但在這種情況下，有#modal對任何將實際使用此功能的頁面沒有重複。我甚至通過指定.modal而不是#modal來使#modal成爲一個類。結果是一樣的

編輯完

// Load external content in modal 
$(document).ready(function(){  
    $('#modal').on('click', function(event){ 
     var $link = $(this); 
     var $dialog = $('<div></div>') 
      .load($link.attr('href') + ' #content') 
      .dialog({ 
       autoOpen: false, 
       modal: true, 
       resizable: false, 
       draggable: false, 
       overflow: scroll, 
       title: $link.attr('title'), 
       width: $link.attr('width') 
      }); 

     $link.click(function(){ 
      $dialog.dialog('open'); 
      return false; 
     }); 
    }); 
}); 

會發生什麼事是，雖然click事件剛去的鏈接，而不是加載外部頁面的模式對話框的。包含所有必需的jQuery和jQuery UI庫，並從Google jQuery存儲庫鏈接。從我閱讀過的例子和我見過的這個應該工作。

我也使用

$('#modal').bind('click', function(){ 

和

$('#modal').click(function(){ 

在此先感謝

Answer 1

它去的鏈接，因爲你沒有阻止默認行爲錨嘗試。使用event.preventDefault

$('#modal').on('click', function(event){ // <-- modal is a link with a `href` 
     event.preventDefault(); // <-- 
     var $link = $(this); 
     var $dialog = $('<div></div>') 
      .load($link.attr('href') + ' #content') 
      .dialog({ 

錨帶有href屬性 - 點擊時 - 轉到HREF內提供的鏈接。如果您不阻止該默認操作，它將會去那裏。

Answer 2

我並不是100％確定底線的click事件發生了什麼。聽起來像#modal是一個a元素，但。該鏈接的默認行爲很可能是此處的罪魁禍首，因此請添加event.preventDefault();。我已將它添加到.on的第一行。

現在，我不確定第二次點擊事件會做什麼，因爲您將它連接到#modal鏈接。

// Load external content in modal 
$(document).ready(function(){  
    $('#modal').on('click', function(event){ 
     event.preventDefault(); 
     var $link = $(this); 
     var $dialog = $('<div></div>') 
      .load($link.attr('href') + ' #content') 
      .dialog({ 
       autoOpen: false, 
       modal: true, 
       resizable: false, 
       draggable: false, 
       overflow: scroll, 
       title: $link.attr('title'), 
       width: $link.attr('width') 
      }); 

     $link.click(function(){ 
      $dialog.dialog('open'); 
      return false; 
     }); 
    }); 
}); 

的HTML模式的加載後，你想讓它打開，或者是你真的在等待用戶再次點擊#modal打開對話框？

Answer 3

嘗試：

$('#modal').on('click', function(event){ 
event.preventDefault(); 

如果失敗嘗試看到這一點：

Opening External URL in JQuery UI Dialog on Wordpress page