Comment afficher un IFRAME dans une boîte de dialogue modale à l'aide de jQuery-ui / dialog

Question

L'application web que je me suis mise à niveau utilise jQuery et jQuery ui. J'ai remplacé la plupart des cas d' window.open et <a target=_blank/> avec jQuery.la boîte de dialogue. Par exemple, les termes et conditions utilisées pour l'ouvrir dans une nouvelle fenêtre; maintenant, j'utilise jQuery.dialogue avec l'AJAX. Pour des raisons de cohérence j'ai l'intention de l'utiliser dans la mesure du possible.

Un tel endroit est une page où je vais avoir des liens externes vers des vidéos. Quelque chose comme:

<a href="http://website.com/videos/1.html" target="_blank"><img src="http://website.com/videos/1.png"></a>
<a href="http://website.com/videos/2.html" target="_blank"><img src="http://website.com/videos/2.png"></a>

Dans certaines situations, je pourrais utiliser target=iframe1. Maintenant, au lieu d'ouvrir le contenu dans une iframe ou une fenêtre pop-up, je veux afficher le contenu à l'intérieur d'une boîte de dialogue contextuelle. Comment puis-je utiliser jQuery boîte de dialogue pour y parvenir? Et s'il y a des erreurs, faites le moi savoir à l'avance.

Answer 1

Les problèmes étaient les suivants:

1. iframe contenu provient d'un autre domaine
2. iframe dimensions doivent être adaptées à chaque vidéo

La solution basée sur les omerkirk réponse consiste à:

• La création d'un élément iframe
• La création d'un dialogue avec autoOpen: false, width: "auto", height: "auto"
• La spécification de l'iframe de la source, de la largeur et de la hauteur avant l'ouverture de la boîte de dialogue

Voici une ébauche de code:

HTML

<div class="thumb">
    <a href="http://jsfiddle.net/yBNVr/show/"   data-title="Std 4:3 ratio video" data-width="512" data-height="384"><img src="http://dummyimage.com/120x90/000/f00&text=Std+4-3+ratio+video" /></a></li>
    <a href="http://jsfiddle.net/yBNVr/1/show/" data-title="HD 16:9 ratio video" data-width="512" data-height="288"><img src="http://dummyimage.com/120x90/000/f00&text=HD+16-9+ratio+video" /></a></li>
</div>

jQuery

$(function () {
    var iframe = $('<iframe frameborder="0" marginwidth="0" marginheight="0" allowfullscreen></iframe>');
    var dialog = $("<div></div>").append(iframe).appendTo("body").dialog({
        autoOpen: false,
        modal: true,
        resizable: false,
        width: "auto",
        height: "auto",
        close: function () {
            iframe.attr("src", "");
        }
    });
    $(".thumb a").on("click", function (e) {
        e.preventDefault();
        var src = $(this).attr("href");
        var title = $(this).attr("data-title");
        var width = $(this).attr("data-width");
        var height = $(this).attr("data-height");
        iframe.attr({
            width: +width,
            height: +height,
            src: src
        });
        dialog.dialog("option", "title", title).dialog("open");
    });
});

Démo ici et code ici. Et un autre exemple du même genre

Answer 2

Cela peut être fait de différentes manières, mais je ne suis pas sûr de savoir laquelle est la meilleure pratique. La première approche est que vous pouvez ajouter un iFrame dans le conteneur de dialogue à la volée avec votre lien donné:

 $("#dialog").append($("<iframe />").attr("src", "your link")).dialog({dialogoptions});
 

Une autre solution consisterait à charger le contenu de votre lien externe dans le conteneur de dialogue à l’aide de ajax.

 $("#dialog").load("yourajaxhandleraddress.htm").dialog({dialogoptions});
 

Les deux fonctionnent bien, mais dépend du contenu externe.