将外部 URL 加载到模态 jquery ui 对话框中答案

【问题标题】：load external URL into modal jquery ui dialog将外部 URL 加载到模态 jquery ui 对话框中
【发布时间】：2012-08-27 06:19:53
【问题描述】：

为什么不将 ibm.com 显示为 400x500px 模式？该部分似乎是正确的，但它不会导致弹出模式出现。

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

【问题讨论】：

标签： jquery jquery-ui

【解决方案1】：

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

在函数中使用 this。如果您真的想将外部 URL 作为 IFRAME 加载，这非常好。还要确保在您的自定义 jqueryUI 中有对话框。

【讨论】：

工作示例：codepen.io/pwasiewi/pen/igBpH 这是唯一适合我的解决方案。

【解决方案2】：

编辑：如果您使用的是最新版本的 jQueryUI，此答案可能已过时。

用于触发对话的锚点 -

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

这是脚本 -

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

【讨论】：

它不起作用。 URL ibm.com 出现在一个完整的窗口中，而不是一个较小的模式窗口。尺寸未指定。请问我该怎么做？
@verlager：更新了答案。查看this demo。
那个演示只是一个模态div。我需要以模式显示整个网页。您在上面给出的示例代码似乎根本不起作用。嗯。
@verlager: .load() 使用 GET 方法对 URL 内容进行 ajax-fetch 并将其加载到目标 div 中。看到这个related question
我不希望 ibm.com 进入目标 div；我想将它加载到 jquery UI 模式（如 iframe）中。我能做些什么？我查看了其他 jquery modals，我想尝试 jquery UI。我目前正在使用 TinyBox2，我想我需要更好的东西。

【解决方案3】：

以下内容可在任何网站上开箱即用：

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

【讨论】：

顺便说一句，我尝试了你的代码，但不断收到：Uncaught TypeError: $(...).appendTo(...).dialog is not a function
听起来像是 .load(url) 的竞争条件。我添加了一个没有给我任何错误的代码 sn-p。如果你觉得无聊，试试吧。 Snippet 工具不会加载 url，因为代码需要相同的域来源并且 Stack Overflow 会阻止内部请求。在您在自己的域中实现此功能之前，您将看到的只是一个空白模式。

【解决方案4】：

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>

【讨论】：

您的示例按照要求使用引导程序而不是 jQuery UI 对话框
@FelipeVolpatto 是的，这是 bootstrap 和 Jquery 的结合

【解决方案5】：

我是这样做的，在我的例子中，“struts2ActionName”是 struts2 动作。您可以改用任何网址。

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

【讨论】：

【解决方案6】：

Modals 总是将内容加载到页面上的元素中，通常是div。当涉及到 jQuery UI 对话框时，可以将这个 div 视为 iframe 等价物。现在取决于您的要求，您是想要驻留在页面中的静态内容还是想要从其他位置获取内容。您可以使用此代码，看看它是否适合您：

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

但是，您应该记住一些事项。您将无法在本地系统上加载远程 URL，如果要加载远程 URL，则需要上传到服务器。即使这样，您也只能加载属于同一域的 URL；例如如果您将此文件上传到“www.example.com”，则您只能访问“www.example.com”上托管的文件。对于加载外部链接this 可能会有所帮助。根据@Robin 的建议，您可以在link 中找到所有这些信息。

【讨论】：