load external URL into modal jquery ui dialog

Question

why doesn't this display ibm.com into a 400x500px modal? The section appears to be correct, but it doesn't cause the popup modal to appear.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>test</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />

<link rel="stylesheet" type="text/css" media="screen" href="css/jquery-ui-1.8.23.custom.css"/>

</head>

<body>

<p>First open a modal <a href="http://ibm.com" class="example"> dialog</a></p>

</body>

<!--jQuery-->
<script src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script src="js/jquery-ui-1.8.23.custom.min.js"></script>

<script type="text/javascript">
function showDialog(){
    $(".example").dialog({
    height: 400,
            width: 500,
            modal: true 
return false;   
}
 </script>

</html>

score 62 · Answer 1 · answered Dec 24 '12 at 12:10

var page = "http://somurl.com/asom.php.aspx";

var $dialog = $('<div></div>')
               .html('<iframe style="border: 0px; " src="' + page + '" width="100%" height="100%"></iframe>')
               .dialog({
                   autoOpen: false,
                   modal: true,
                   height: 625,
                   width: 500,
                   title: "Some title"
               });
$dialog.dialog('open');

Use this inside a function. This is great if you really want to load an external URL as an IFRAME. Also make sure that in you custom jqueryUI you have the dialog.

The working example: http://codepen.io/pwasiewi/pen/igBpH This is the only solution which works for me. — 42n4, Sep 16 '14 at 12:14

Robin Maben · Answer 2 · 2014-02-09T12:48:18.867

15

EDIT: This answer might be outdated if you're using a recent version of jQueryUI.

For an anchor to trigger the dialog -

<a href="http://ibm.com" class="example">

Here's the script -

$('a.example').click(function(){   //bind handlers
   var url = $(this).attr('href');
   showDialog(url);

   return false;
});

$("#targetDiv").dialog({  //create dialog, but keep it closed
   autoOpen: false,
   height: 300,
   width: 350,
   modal: true
});

function showDialog(url){  //load content and open dialog
    $("#targetDiv").load(url);
    $("#targetDiv").dialog("open");         
}

edited Feb 09 '14 at 12:48

answered Aug 27 '12 at 06:23

Robin Maben

22,194
16
64
99

2

It doesn't work. The URL ibm.com appears in a full window, instead of a smaller modal window. The size hasn't been specified. How can I do that, please? – verlager Aug 27 '12 at 06:54
@verlager: Updated answer. Check out [this demo](http://jqueryui.com/demos/dialog/modal-form.html). – Robin Maben Aug 27 '12 at 07:02
1

That demo is just a modal div. I need to show an entire web page in a modal. The example code you gave above doesn't seem to work at all. Hmmm. – verlager Aug 27 '12 at 07:06
@verlager: `.load()` uses the GET method to ajax-fetch the URL content and loads it into the target div. See this [related question](http://stackoverflow.com/questions/809035/ajax-jquery-ui-dialog-window-loaded-within-ajax-style-jquery-ui-tabs) – Robin Maben Aug 27 '12 at 07:08
3

I don't want ibm.com into a target div; I want to load it into a jquery UI modal (like an iframe). What can I do? I have looked at other jquery modals and I want to try jquery UI. I am using TinyBox2 presently and I think I need something better. – verlager Aug 27 '12 at 07:14
@verlager: Sorry, I wish I had more time to help you on this. :( Search for "load ajax/dynamic content into jQuery modal". Good luck. – Robin Maben Aug 27 '12 at 07:26
Hmmm. Thanks for trying! Maybe someone else can help with this. – verlager Aug 27 '12 at 07:29
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/15837/discussion-between-verlager-and-robin-maben) – verlager Aug 27 '12 at 07:36

Jason Williams · Answer 3 · 2015-10-01T18:15:06.770

The following will work out of the box on any site:

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
 
    <div class="dialogBox" style="border:1px solid gray;">
        <a href="/" class="exampleLink">Test</a>
        <!-- TODO: Change above href -->
        <!-- NOTE: Must be a local url, not cross domain -->
    </div>
    
    <script type="text/javascript">
         

        var $modalDialog = $('<div/>', { 
          'class': 'exampleModal', 
          'id': 'exampleModal1' 
        })
        .appendTo('body')
        .dialog({
            resizable: false,
            autoOpen: false,
            height: 300,
            width: 350,
            show: 'fold',
            buttons: {
                "Close": function () {
                    $modalDialog.dialog("close");
                }
            },
            modal: true
        });

        $(function () {
            $('a.exampleLink').on('click', function (e) {
                e.preventDefault();
                // TODO: Undo comments, below
                //var url = $('a.exampleLink:first').attr('href');
                //$modalDialog.load(url);
                $modalDialog.dialog("open");
            });
        });

    </script>

for kicks, I tried your code, but keep getting: Uncaught TypeError: $(...).appendTo(...).dialog is not a function — MC9000, Sep 29 '15 at 04:15
Sounds like a race condition with .load(url) . I added a code snippet which doesn't give me any errors. Try it if you are bored. Snippet tool does not load a url because the code requires same domain origin and Stack Overflow prevents internal requests. All you'll see is a blank modal until you implement this on your own domain. — Jason Williams, Oct 01 '15 at 18:17

Khadka Pushpendra · Answer 4 · 2019-01-24T05:38:35.403

if you are using **Bootstrap** this is solution, 

$(document).ready(function(e) {
    $('.bootpopup').click(function(){
  var frametarget = $(this).attr('href');
  targetmodal = '#myModal'; 
        $('#modeliframe').attr("src", frametarget );   
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- Button trigger modal -->
<a  href="http://twitter.github.io/bootstrap/" title="Edit Transaction" class="btn btn-primary btn-lg bootpopup" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</a>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
         <iframe src="" id="modeliframe" style="zoom:0.60" frameborder="0" height="250" width="99.6%"></iframe>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Your example uses bootstrap instead of jQuery UI dialog as asked — Felipe Volpatto, Jun 29 '17 at 14:12
@FelipeVolpatto ya this is the combination of bootstrap and Jquery — Khadka Pushpendra, Jul 10 '17 at 17:54

score 1 · Answer 5 · edited Oct 03 '19 at 10:31

1

I did it this way, where 'struts2ActionName' is the struts2 action in my case. You may use any url instead.

var urlAdditionCert =${pageContext.request.contextPath}/struts2ActionName";
$("#dialogId").load( urlAdditionCert).dialog({
    modal: true,
    height: $("#body").height(),
    width: $("#body").width()*.8
});

edited Oct 03 '19 at 10:31

Rajan Sharma

2,211
3
21
33

answered Oct 03 '19 at 09:54

siddhartha attri

93
8

score 0 · Answer 6 · edited May 23 '17 at 12:02

Modals always load the content into an element on the page, which more often than not is a div. Think of this div as the iframe equivalent when it comes to jQuery UI Dialogs. Now it depends on your requirements whether you want static content that resides within the page or you want to fetch the content from some other location. You may use this code and see if it works for you:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>test</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />

<link rel="stylesheet" type="text/css" media="screen" href="css/jquery-ui-1.8.23.custom.css"/>

</head>

<body>

    <p>First open a modal <a href="http://ibm.com" class="example"> dialog</a></p>
    <div id="dialog"></div>
</body>

<!--jQuery-->
<script src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script src="js/jquery-ui-1.8.23.custom.min.js"></script>

<script type="text/javascript">

$(function(){
//modal window start
$(".example").unbind('click');
$(".example").bind('click',function(){
    showDialog();
    var titletext=$(this).attr("title");
    var openpage=$(this).attr("href");
    $("#dialog").dialog( "option", "title", titletext );
    $("#dialog").dialog( "option", "resizable", false );
    $("#dialog").dialog( "option", "buttons", { 
        "Close": function() { 
            $(this).dialog("close");
            $(this).dialog("destroy");
        } 
    });
    $("#dialog").load(openpage);
    return false;
});

//modal window end

//Modal Window Initiation start

function showDialog(){
    $("#dialog").dialog({
        height: 400,
        width: 500,
        modal: true 
    }
</script>

</html>

There are, however, a few things which you should keep in mind. You will not be able to load remote URL's on your local system, you need to upload to a server if you want to load remote URL. Even then, you may only load URL's which belong to the same domain; e.g. if you upload this file to 'www.example.com' you may only access files hosted on 'www.example.com'. For loading external links this might help. All this information you will find in the link as suggested by @Robin.

load external URL into modal jquery ui dialog

6 Answers6

Linked