jQuery UI Dialog using iframe URL
j'ai utilisé nyroModal et Fancybox comme outils pour les sites Web, mais dans ce cas, je dois utiliser l'outil de dialogue de jQuery UI. J'ai besoin de ce dialogue pour charger une page. Je crois que je l'ai déjà fait, mais tout ce que je rencontre semble plus complexe qu'il ne devrait l'être. Je ne peux pas utiliser quelque chose comme...
$( "#dialog" ).dialog({
autoOpen: false,
modal: true,
url: http://www.google.com
});
<button id="dialog">Open Dialog</button>
et avoir la page ouverte dans une iframe simple? Merci à l'avance.
je n'ai trouve que j'ai ce code,
<script>
//$.fx.speeds._default = 500;
$(function() {
$( "#dialog" ).dialog({
autoOpen: false,
show: "fade",
hide: "fade",
modal: true,
open: function () {$(this).load('nom-1-dialog-add-vessels.html');},
height: 'auto',
width: 'auto',
resizable: true,
title: 'Vessels' });
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
return false;
});
});
</script>
<div id="dialog"></div><button id="opener">Open Dialog</button>
mais il ne charge pas le page réelle.
3 réponses
url n'est pas une des options dans jQuery UI dialog.
Une des choses qui a fonctionné pour moi est d'avoir un iframe à l'intérieur du div c'est votre dialogue, et définissez sa propriété url sur le open événement.
Comme:
<div id="dialog">
<iframe id="myIframe" src=""></iframe>
</div>
<button id="dialogBtn">Open Dialog</button>
et JS:
$("#dialog").dialog({
autoOpen: false,
modal: true,
height: 600,
open: function(ev, ui){
$('#myIframe').attr('src','http://www.jQuery.com');
}
});
$('#dialogBtn').click(function(){
$('#dialog').dialog('open');
});
Vous trouvez que vous avez besoin de style sur l'iframe pour le faire paraître belle, cependant.
#myIframe{
height: 580px;
}
modifier: version de travail - http://jsbin.com/uruyob/1/edit
basé sur Floyd Rose et ton code, j'ai consolidé un code. Consultez ici http://jsfiddle.net/Nz9Q8/
$(function () {
$("#dialog").dialog({
autoOpen: false,
show: "fade",
hide: "fade",
modal: true,
open: function (ev, ui) {
$('#myIframe').src = 'http://www.w3schools.com';
},
height: 'auto',
width: 'auto',
resizable: true,
title: 'Vessels'
});
$("#opener").click(function () {
$("#dialog").dialog("open");
return false;
});
});
j'ai essayé une chose similaire. Cochez cette http://jsfiddle.net/P2Q5U/
<div id="dialogContent" title="Basic dialog">
<iframe src="http://www.w3schools.com"></iframe>
</div>
<button id="dialog">Open Dialog</button>
$(function () {
$("#dialogContent").dialog({
autoOpen: false,
modal: true
});
$('#dialog').click(function () {
$("#dialogContent").dialog( "open" );
});
});