web-dev-qa-db-fra.com

boîte de dialogue de l'interface utilisateur jQuery utilisant l'URL d'iframe

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 pense avoir déjà fait cela auparavant, mais tout ce que je rencontre me 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 un simple iframe? Merci d'avance.

J'ai trouvé 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 cela ne charge pas la page réelle.

javascriptiframedialogmodal-dialog
10
triplethreat77

url n'est pas l'une des options de la boîte de dialogue jQuery UI .

Une des choses qui a fonctionné pour moi est d'avoir une iframe dans la div qui est votre boîte de dialogue et de définir sa propriété url sur l'événement open.

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 constaterez que vous avez besoin d'un peu de style sur l'iframe pour le rendre joli, cependant.

#myIframe{
  height: 580px;
}

EDIT: Version de travail - http://jsbin.com/uruyob/1/edit

32
Floyd Pink

Basé sur Floyd Pink et votre code, j'ai consolidé un code. Vérifiez 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;
  });
});
3
Muthukumar

J'ai essayé une chose similaire. Vérifiez ceci 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" );
   });
 });
0
Muthukumar