Fonction jQuery pour charger le contenu de la page dans la boîte de dialogue modale

Question

J'ai la fonction suivante qui doit charger le div id "content" dans la boîte de dialogue modale pour tout lien avec l'ID de "#modal".

EDIT

Je comprends que ID doit être unique, mais dans ce cas, il n'y a pas de répétition #modal sur l'une des pages qui en fait utiliser cette fonction. J'ai même fait #modal une classe en spécifiant .modal au lieu de #modal. le résultat est le même

FIN EDIT

// 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; 
     }); 
    }); 
}); 

Que se passe-si est que l'événement click va juste le lien au lieu de charger la page externe dans le Modal Dialog. Toutes les bibliothèques jQuery et jQuery UI requises sont incluses et liées à partir du référentiel jQuery de Google. D'après ce que j'ai lu et les exemples que j'ai vu cela DEVRAIT fonctionner.

J'ai également essayé d'utiliser

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

et

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

Merci à l'avance

Answer 1

Il va au lien parce que vous n'a pas empêché le comportement d'ancrage par défaut. utiliser 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({ 

Une ancre avec une propriété href - lorsque vous cliquez dessus - va le lien fourni dans le href. Si vous n'empêchez pas cette action par défaut, elle ira là.

Answer 2

Je ne suis pas sûr à 100% quoi de neuf avec l'événement click que vous êtes en train de câbler en bas. On dirait que #modal est un élément a, cependant. Le comportement par défaut du lien est probablement le coupable ici, alors ajoutez event.preventDefault();. Je l'ai ajouté à la première ligne de votre .on.

Maintenant, je ne suis pas sûr de ce que cet événement de deuxième clic va faire, puisque vous le reliez au lien #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; 
     }); 
    }); 
}); 

Après le code html modal est chargé, voulez-vous pour ouvrir, ou vous attendez vraiment pour l'utilisateur de cliquer à nouveau #modal pour ouvrir la boîte de dialogue?

Answer 3

Essayez:

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

Si cela échoue, essayez de voir ceci:

Opening External URL in JQuery UI Dialog on Wordpress page