12

I've used nyroModal and Fancybox as tools for websites but in this instance I must use jQuery UI's dialog tool. I need this dialog to load a page. I believe I've done this before but everything I come across seems more complex than it should be. Can't I use something like...

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

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

and have the page open in a simple iframe? Thanks in advance.

I did find that I have this 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>

but it's not loading the actual page.

ChrisF
  • 134,786
  • 31
  • 255
  • 325
triplethreat77
  • 1,276
  • 8
  • 34
  • 69

3 Answers3

34

url is not one of the options in jQuery UI dialog.

One of the things that has worked for me is to have an iframe inside the div that is your dialog, and set its url property on the open event.

Like:

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

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

You would find that you need some styling on the iframe to get it look nice, though.

#myIframe{
  height: 580px;
}

EDIT: Working version - http://jsbin.com/uruyob/1/edit

Hari Pachuveetil
  • 10,294
  • 3
  • 45
  • 68
  • That seems to make sense, but there is an empty box on my page. – triplethreat77 Jan 28 '13 at 20:07
  • the js bin eg looks so simple and easy, but I already get an empty box on my page and text "your iframe below" is just lying next to it and nothing happens when I click the button! I also tried including all the jquery-ui-js files. Nothing! – allwynmasc Oct 16 '14 at 06:15
  • You might want to add type='button' to the button. Otherwise, if your button is in a form, it will submit it. – R. Schreurs Oct 18 '18 at 09:13
  • Hoe can I do the same thing on Blazor server app? – Shuvra Oct 19 '20 at 14:40
3

Based on Floyd Pink and your code, I have consolidated an code. Check here 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;
  });
});
Community
  • 1
  • 1
Muthukumar
  • 8,679
  • 17
  • 61
  • 86
  • 3
    You could remove the src from the `iframe` and change this line `$('#myIframe').src = 'http://www.w3schools.com';` to `$('#myIframe').attr('src','http://www.w3schools.com');` – Hari Pachuveetil Jan 28 '13 at 20:20
0

I tried a similar thing. Check this 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" );
   });
 });
Muthukumar
  • 8,679
  • 17
  • 61
  • 86