34

为什么这不将 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>
4

6 回答 6

62 
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 中有对话框。

于 2012-12-24T12:10:20.720 回答
15

编辑：如果您使用的是最新版本的 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");         
}
于 2012-08-27T06:23:18.023 回答
6

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

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

于 2014-08-31T16:22:09.617 回答
2 

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>

于 2017-02-21T07:42:58.113 回答
1

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

var urlAdditionCert =${pageContext.request.contextPath}/struts2ActionName";
$("#dialogId").load( urlAdditionCert).dialog({
    modal: true,
    height: $("#body").height(),
    width: $("#body").width()*.8
});
于 2019-10-03T09:54:35.870 回答
0

模态总是将内容加载到页面上的一个元素中，这通常是一个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”上托管的文件。对于加载外部链接，这可能会有所帮助。您可以在@Robin 建议的链接中找到所有这些信息。

于 2012-10-15T19:23:05.930 回答