load external URL into modal jquery ui dialog

Asked 27/8, 2012 at 6:19 Answered 3/10, 2019 at 9:54

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>

Georgeanngeorgeanna answered 27/8, 2012 at 6:19 Comment(0)

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.

Wachtel answered 24/12, 2012 at 12:10 Comment(1)

The working example: codepen.io/pwasiewi/pen/igBpH This is the only solution which works for me. – Rufous 16/9, 2014 at 12:14

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");         
}

Execration answered 27/8, 2012 at 6:23 Comment(8)

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? – Georgeanngeorgeanna 27/8, 2012 at 6:54

@verlager: Updated answer. Check out this demo. – Execration 27/8, 2012 at 7:2

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. – Georgeanngeorgeanna 27/8, 2012 at 7:6

@verlager: .load() uses the GET method to ajax-fetch the URL content and loads it into the target div. See this related question – Execration 27/8, 2012 at 7:8

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. – Georgeanngeorgeanna 27/8, 2012 at 7: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. – Execration 27/8, 2012 at 7:26

Hmmm. Thanks for trying! Maybe someone else can help with this. – Georgeanngeorgeanna 27/8, 2012 at 7:29

let us continue this discussion in chat – Georgeanngeorgeanna 27/8, 2012 at 7:36

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>

Venus answered 31/8, 2014 at 16:22 Comment(2)

for kicks, I tried your code, but keep getting: Uncaught TypeError: $(...).appendTo(...).dialog is not a function – Words 29/9, 2015 at 4: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. – Venus 1/10, 2015 at 18:17

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>

Deming answered 21/2, 2017 at 7:42 Comment(2)

Your example uses bootstrap instead of jQuery UI dialog as asked – Gorilla 29/6, 2017 at 14:12

@FelipeVolpatto ya this is the combination of bootstrap and Jquery – Deming 10/7, 2017 at 17:54

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

Chemotropism answered 3/10, 2019 at 9:54 Comment(0)

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.

Masha answered 15/10, 2012 at 19:23 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags