0

在列表的 AllItems 页面上，我在显示列表的 Web 部件上方添加了一个内容编辑器 WebPart。此 Web 部件仅包含一个 HTML 按钮。当用户单击按钮时，列表中的所有项目将由几个 JavaScript/jQuery/AJAX 函数处理。但是该列表包含 1000 多个项目，不让他们知道代码正在处理这些项目是不友好的。

首先，出于开发目的，我在方法之间使用警报来显示某种交互性并为用户提供信息。但现在我正在使用 jQuery 模态对话框以一种很好的方式向用户展示代码正在处理项目。

对话框已显示，但不在屏幕中央，标题栏未显示在对话框的整个宽度上，透明灰色覆盖层不可见。我在一个空的 ASP.NET Web 应用程序中测试了完全相同的代码，在这种情况下一切正常。

我正在使用 jQuery 1.8.2 和 jQuery UI 1.10.1。无论如何，这就是我所拥有的：

function showProcessDialog() {
    showDialog("Please wait while processing all items...", null);
}

function showDialog(message, dialogButtons) {
    $("#messageContainer").text(message);
    $('#dialog-message').parent().appendTo($('form:first'));
    $("#dialog-message").dialog({
        draggable: false,
        height: "auto",
        modal: true,
        open: function (event, ui) { $(".ui-dialog-titlebar-close").hide(); },
        position: { my: "center", at: "center", of: window },
        resizable: false,
        width: 400,
        buttons: dialogButtons
    });
}

注意这一行：

$('#dialog-message').parent().appendTo($('form:first'));

我读到，当在 SharePoint 2007 中加载页面时，jQuery 会操纵 DOM，并且将充当对话框的 div 元素放置在正文的外部。最大的问题是对话框中的服务器端控件将不再起作用，并且此行将 div 放回表单中。我把它留在那里是因为你永远不知道...

这是 ASP.NET Web 应用程序中的结果：

在 ASP.NET Web 应用程序中工作

这是 SharePoint 2007 中的相同代码：

在 SharePoint 2007 中不工作

有谁知道我该如何解决这个问题，以便结果与工作结果相同？提前致谢！

4

3 回答 3

1

我在这里创建了一个非常简化的版本，您可以进行测试。从样式上看，某些 jquery-ui 项目没有正确加载，您是否查看了 chrome 的调试器 /firebug 的“网络”部分以查看是否有任何项目未加载？

function showDialog(message, dialogButtons) {
   var dialog1 = $('<div id="main_content" class="ui-widget" title="Documents"></div>');
   $(dialog1).html(message);
   $(dialog1).dialog({ width: 200, height: 200, position: "center" ,modal:true});
}

您是否尝试过手动更改 Dialog DOM 元素以将其与 css 居中，如下所示：

.center
{
    margin-left:auto;
    margin-right:auto;
    width:70%;
}
于 2013-02-27T12:44:39.097 回答
1

我在尝试升级到最新版本的 jQuery 和 jQuery UI 的应用程序中遇到了完全相同的问题。我正在运行 IE 8（在 7 模式下）。

我可以告诉你，在我升级之前工作的是 jQuery 1.6.2 和 jQuery UI 1.8.16。最终，我切换回这些版本，因为无论如何客户端很快就会升级到 SP 2010，而且解决它不值得麻烦。

    $('#search-modal').dialog({ autoOpen: false, bgiframe: true, modal: true, width: 400, height: 550, resizable: false });
    $('#search-modal').dialog('open');
    $('#search-modal').parent().appendTo($("form:first"));

祝你好运！

于 2013-03-05T03:34:21.403 回答
0

问题在于 IE 文档模式。默认情况下，SP2007 页面以兼容模式呈现，因为如上面评论中所述，IE 进入了怪癖模式。这就是它不同于 ASP 解决方案的原因。
如果您切换到 IE7+ 文档模式 - jQuery 可以工作，但您可能会遇到一些与渲染共享点页面相关的新问题。

我更喜欢在这种情况下使用自定义 js，因为它更灵活。要使 div 居中，您应该将显示按钮的 onclick 行为更改为以下内容：

pos = get_scroll(); 
$("#dialog").css({ 
    'top': pos.y,
    'left': pos.x + window.screen.availWidth / 2,
    'margin-left': 50}
).show();

如您所见，您在这里也已经有关闭按钮问题，如果内容 div 变得大于对话框 div，稍后会遇到溢出问题。

于 2013-04-19T11:22:29.120 回答