wake-up-neo.com

jQuery UI-Dialog mit iframe-URL

Ich habe nyroModal und Fancybox als Werkzeuge für Websites verwendet, aber in diesem Fall muss ich das Dialogwerkzeug von jQuery UI verwenden. Ich brauche diesen Dialog, um eine Seite zu laden. Ich glaube, ich habe das schon einmal gemacht, aber alles, was mir begegnet, erscheint komplexer als es sein sollte. Kann ich sowas nicht benutzen ...

$( "#dialog" ).dialog({
      autoOpen: false,
      modal: true,
      url: http://www.google.com
      });

<button id="dialog">Open Dialog</button>

und haben Sie die Seite in einem einfachen iframe geöffnet? Danke im Voraus.


Ich habe festgestellt, dass ich diesen Code habe, 

<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>

aber es lädt nicht die tatsächliche Seite.

10
triplethreat77

url ist keine der Optionen im jQuery UI-Dialog .

Eines der Dinge, die für mich funktioniert haben, ist, eine iframe in der div, die Ihr Dialog ist, zu haben und deren URL-Eigenschaft für das open-Ereignis festzulegen.

Mögen:

<div id="dialog">
    <iframe id="myIframe" src=""></iframe>
</div>
<button id="dialogBtn">Open Dialog</button>

Und 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');
});

Sie würden jedoch feststellen, dass Sie etwas Styling auf dem Iframe benötigen, damit er schön aussieht.

#myIframe{
  height: 580px;
}

EDIT: Arbeitsversion - http://jsbin.com/uruyob/1/edit

32
Floyd Pink

Basierend auf Floyd Pink und Ihrem Code habe ich einen Code konsolidiert. Überprüfen Sie hier 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

Ich habe etwas Ähnliches versucht. Überprüfen Sie diese 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