L'application Web que je mets à niveau utilise jQuery et jQuery UI. J'ai remplacé la plupart des instances de window.open
et <a target=_blank>
avec la boîte de dialogue jQuery UI. Par exemple, les termes et conditions utilisés pour ouvrir dans une nouvelle fenêtre; J'utilise maintenant la boîte de dialogue jQuery UI avec AJAX. Par souci de cohérence, je prévois de l’utiliser autant que possible.
Un de ces endroits 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 contextuelle, je souhaite afficher le contenu dans une boîte de dialogue contextuelle. Comment puis-je utiliser la boîte de dialogue jQuery UI pour y parvenir? Y aura-t-il des pièges?
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.
Les problèmes étaient:
La solution basée sur réponse d'omerkirk implique:
autoOpen: false, width: "auto", height: "auto"
Voici un aperçu du code:
<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>
$(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 autre exemple similaire