JQuery对话框模式框框架

JQuery Dialog Modal Box Frame

本文关键字：框架 模式 对话框 JQuery      更新时间：2023-09-26

我试图在页面上使用对话框元素，但遇到了一些问题。看起来盒子本身并没有出现。我在对话框中有一个iframe，它运行正常（除了一些大小问题），但框的标题栏和（有时）按钮没有显示。我在网上看到，造成这种情况的原因通常是没有包括JQuery UI css文件，但我认为这不是问题所在，因为我有一个链接，它是从另一个正在正确创建对话框的页面复制的。我无法决定它是否相关，但我正在SharePoint Designer中创建页面，它使用两种不同的标准来评估页面，其中一种（不起作用的标准）声称<link>标记是一个错误，并表示"在XHTML 1.0 Strict中，标记不能包含"但是，<link>标记周围没有<div>，并且设计者还表示，在这个版本的XHTML中不允许使用许多SharePoint创建的名为<SharePoint:...>的选项卡。创建对话框的代码供参考：

<div id='am_schedDetailModal' title='Details'>
  <div class='ui-widget'></div>
</div>

$(document).ready(function() {
    $("#am_schedDetailModal").dialog({
        autoOpen: false,
        modal: true,
        buttons: {
            'Close': function() {
                $(this)
                    .html('')
                    .dialog('close');
            }
        }
    });
});

function onClick() {
    var width = window.innerWidth ||
         document.documentElement.clientWidth ||
         document.body.clientWidth;
    var height = window.innerHeight ||
         document.documentElement.clientHeight ||
         document.body.clientHeight;
    $('#am_schedDetailModal').dialog('option', 'width', Math.floor(width * .7));
    $('#am_schedDetailModal').dialog('option', 'height', Math.floor(height * .7));

    $('#am_schedDetailModal div').html("<iframe id='am_mdl_iframe' src='" + input + "' height='100%' width='100%'>");
    $('#am_schedDetailModal').dialog('open');
}

如有任何帮助，我们将不胜感激。

EDIT:我很确定包含CSS的<link>根本没有被加载，因为iframe显示在适当的<div>及其周围，应该显示在模态框中。然而，我仍然不明白为什么CSS没有加载。

好吧，我不知道原因是什么，但我找到了一个新的地方来放置<link>标签，现在它正在正确加载。如果其他人对SharePoint web部件页有此问题，请尝试将标记放在我可能忽略的最明显的位置——包含<meta>标记的<asp:Content>标记。

相关文章：