Comment redimensionner et repositionner une fenêtre shadowbox/greybox à afficher dans un certain élément div?

Question

Je voudrais savoir s'il est possible de redimensionner et de repositionner une boîte grise ou une fenêtre shadowbox pour l'afficher dans un certain élément div?

Je crée un modèle pour un site wordpress, et j'utilise le calendrier par défaut, mais lorsque vous cliquez sur une date dans le calendrier, l'action par défaut est de l'ouvrir dans une nouvelle fenêtre.

Serait-il possible de moduler greybox ou shadowbox de telle sorte que lorsque vous cliquez sur une date, la boîte s'ouvre sur le calendrier affichant son contenu, au lieu d'une nouvelle page?

Ou existe-t-il un autre moyen d'atteindre le résultat souhaité, peut-être avec jQuery ou Javascript?

Toute aide serait grandement appréciée, merci d'avance!

Answer 1

jQuery UI a un widget appelé Dialog qui peut atteindre votre résultat. Vous pouvez l'utiliser comme ceci:

$(document).ready(function() { 

    // This will initialize the dialog box and hide it by default. 
    // You can find a list of most options here: http://docs.jquery.com/UI/Dialog 
    $("#dialog").dialog({ 
     autoOpen: false, 
     modal : true, 
    }); 

    // This will select the links like you specified 
    $('#wp-calendar a').click(function(e) { 
     e.preventDefault() // Disable the link from going to a new page 
     var url = $(this).attr("href"); // Pull the HRef for the link for making the AJAX request 

     // This will make an AJAX request and put the result in the dialog. 
     $("#dialog").empty().load(url, function() { 

      // This is the callback for when the AJAX request finishes 
      // All it does it open the dialog, which now has data in it 
      $("#dialog").dialog("open"); 
     }); 
    }); 
}); 

Note: Vous aurez besoin d'installer jQuery UI pour cela, et vous aurez probablement envie de lire sur Dialog here. Vous aurez besoin de prendre d'autres mesures si vous voulez que cela se dégrade gracieusement, et en fonction de votre balisage. Si vous pouvez poster un extrait d'un "jour" sur le calendrier, je peux essayer de l'adapter à vos besoins.

---

Edit: Disons que le fichier qui retourne la page rendu pour l'événement est « /ajax/event.php?id=123 », vous voulez d'abord voulez éviter le comportement par défaut du lien (de navigation à une nouvelle page); alors vous voudrez utiliser la fonction de chargement de jQuery pour charger les données d'une URL assemblée dans la boîte de dialogue; Une fois cette requête terminée, vous souhaiterez ouvrir la boîte de dialogue. J'ai modifié le code pour le faire, et il se dégradera correctement pour les utilisateurs qui n'ont pas activé JavaScript.