Question

点击链接时，我能够显示一个对话框。如何在对话框中拉出其他页面的内容？

Answer 1

我过去通过将“其他内容”加载到div中然后将该div显示为对话框来完成此操作。

$('#dialog').load('other_content.html', function(){ 
    $(this).dialog();
}

Ajax/load

的jQuery文档

Answer 2

您正在寻找jQuery load()方法吗？

Answer 3

当您通过jquery（即load-method）调用文件时，它是可能的当它被放入窗口对话框时从加载的文件中加载更多内容：

<script>
$(document).ready(function(){
  $("#myDropZone").load("another-file.html");
});
</script>

此代码必须从加载的html内容返回。

BTM，你可以用不同的方式加载内容，但要注意你在做什么。不要递归加载文件。将与循环相同。

希望这有帮助

Answer 4

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="Scripts/css/ui-lightness/jquery-ui-1.8.16.custom.css" rel="stylesheet"
        type="text/css" />
    <script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery-ui-1.8.16.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var UIDialogId = 0;

            $('.UIDialogOpen').live('click', function (e) {
                e.preventDefault();
                alert(this.href);
                UIDialogId++;

                $('<div/>', {
                    'id': $(this).attr('data-dialog-id') !== undefined ? $(this).attr('data-dialog-id') : 'UIDialog' + UIDialogId,
                    'class': 'UIDialog'
                }).appendTo('body').dialog({
                    title: $(this).attr('data-dialog-title') !== undefined ? $(this).attr('data-dialog-title') : 'Message',
                    position: ['center', 'center'],
                    modal: true, resizable: false, zIndex: 10000, autoOpen: true,
                    minWidth: $(this).attr('data-dialog-minwidth') !== undefined ? $(this).attr('data-dialog-minwidth') : '300px',
                    minHeight: $(this).attr('data-dialog-minheight') !== undefined ? $(this).attr('data-dialog-minheight') : '300px',
                    maxWidth: $(this).attr('data-dialog-maxwidth') !== undefined ? $(this).attr('data-dialog-maxwidth') : '300px',
                    maxHeight: $(this).attr('data-dialog-maxheight') !== undefined ? $(this).attr('data-dialog-maxheight') : '300px',
                    close: function (event, ui) {
                        $(this).remove();
                    }
                })
                .load(this.href);

                //Or   //Use .load(this.href); and comment or delete below append line.

                //.append('<h1>Hi.. This is Testing </h1> <input type="button" class="UIDialogCancel" value="Cancel" /> <input type="button" class="UIDialogClose" value="Close" />');


                $('.UIDialogClose, .UIDialogCancel').live('click', function (e) {
                    var obj = $(this)
                    e.preventDefault();
                    obj.parents('.UIDialog').dialog('close');
                });
            });

        });
    </script>
</head>
<body>
    <a href="your url" title="test1" class="UIDialogOpen">test1</a>
    <br />
    <a href="your url" title="test2" class="UIDialogOpen">test2</a>
    <br />
    <a href="your url" title="test3" class="UIDialogOpen">test3 </a>
</body>
</html>

在对话框中加载另一页

4 个答案: