Question

81

jQuery UI Dialog using iframe URL

rated 0 times [ 86] [ 5] / answers: 1 / hits: 86958 / 12 Years ago, mon, january 28, 2013, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jack

Add To Favorites

Follow

Total Points: 557

Total Questions: 96

Total Answers: 80

Location: Saint Helena

Member since Mon, Jan 16, 2023

1 Year ago

answered 12 Years ago tayla · Accepted Answer

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