J'ai un lien comme ça et je veux ouvrir son contenu et l'afficher en utilisant le code ci-dessous:Comment ouvrir le contenu d'une page à partir d'un lien Href pour l'afficher dans une boîte de dialogue JQuery UI?
<a class="uimodal" href="/Administration/Contact">Contact</a>
Comment puis-je faire ce lien ouvrir le contenu href et l'afficher à l'intérieur d'une boîte de dialogue modale jQuery UI ?
La meilleure façon est d'utiliser une opération de chargement Ajax pour récupérer le contenu dans un nouvel élément. Ensuite, lorsque les données sont chargées, appelez le modal sur cet élément:
$('a.uimodal').bind('click', function() {
var $this = $(this);
var outputHolder = $("<div id='.uimodal-output'></div>");
$("body").append(outputHolder);
outputHolder.load($this.attr("href"), null, function() {
outputHolder.dialog(// whatever params you want);
});
return false;
});
AJAX charge: http://api.jquery.com/load/ boîte de dialogue Options: http://jqueryui.com/demos/dialog/
Note: Vous pouvez également afficher la modales si la page AJAX chargement en mettant outputHolder.dialog(//...) avant d'appeler la méthode de chargement.
Vous devrez créer un iframe et l'ouvrir dans votre boîte de dialogue.
Ainsi, quelque chose comme
jQuery('<iframe/>').attr('src', jQuery('.uimodal').attr('href')).dialog('open');
De façon plus détaillée: La boîte de dialogue jQuery UI() ne peut afficher des éléments DOM, vous devez d'abord ajouter quelque chose à votre DOM qui affiche l'URL.
Je chargement de contenu dans une boîte de dialogue sans utiliser IFrame. Voici comment je le fais:
Vous devez d'abord initier votre boîte de dialogue. Vous pouvez utiliser quelque chose comme ceci:
if(jQuery("#dialog_contact").length > 0) {
jQuery("#dialog_contact").dialog({
title: "File browser",
modal: true,
autoOpen: false,
height: 700,
width: 800,
closeText: 'hide',
open: function() {
// Here I load the content. This is the content of your link.
jQuery("#dialog_contact").load("../wp-content/plugins/my_plugin/somPage.php", function() {});
}
}
);
}
// Then open the dialog window on click
jQuery('.uimodal').live('click', function() {
jQuery('.dialog_contact').dialog('open')
});
Voir plus d'informations ici: http://jqueryui.com/demos/dialog/
Dans cette taille de dialogue de code et le titre est déclare en lien
<script type="text/javascript">
function tb_parseQuery(query) {
var Params = {};
if (!query) { return Params; }// return empty object
var Pairs = query.split(/[;&]/);
for (var i = 0; i < Pairs.length; i++) {
var KeyVal = Pairs[i].split('=');
if (!KeyVal || KeyVal.length != 2) { continue; }
var key = unescape(KeyVal[0]);
var val = unescape(KeyVal[1]);
val = val.replace(/\+/g, ' ');
Params[key] = val;
}
return Params;
}
$(document).ready(function() {
$('a.uimodal').bind('click', function() {
var $this = $(this);
var url = $this.attr("href");
var queryString = url.replace(/^[^\?]+\??/, '');
var params = tb_parseQuery(queryString);
TB_WIDTH = (params['width'] * 1) + 30 || 630; //defaults to 630 if no paramaters were added to URL
TB_HEIGHT = (params['height'] * 1) + 40 || $(document).height(); //defaults to 440 if no paramaters were added to URL
TB_Title = (params['title']);
$('<div>').dialog({
modal: true,
open: function() {
$(this).load(url);
},
height: TB_HEIGHT,
width: TB_WIDTH,
title: TB_Title
});
return false;
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<a class="uimodal" href="Dialog.aspx?height=350&width=700&title=تست"> click</a>
</div>
</form>
</body>
</html>
J'ai essayé votre code ... Mais le lien ouvre une Modal et après charges le contenu dans une nouvelle page ... – Paul
Oups, édité. J'ai oublié d'ajouter 'return false;' à la fin de l'événement click. Ceci est nécessaire pour empêcher la propagation du clic. – bmancini