Question

在列表的AllItems页面上，我在显示列表的webpart上方添加了一个内容编辑器WebPart。此webpart仅包含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应用程序中的结果：

Working in ASP.NET Web Application

这与SharePoint 2007中的代码相同：

Not working in SharePoint 2007

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

Answer 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%;
}

Answer 2

我在一个应用程序中遇到了同样的问题，我试图升级到最新版本的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"));

祝你好运！

Answer 3

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

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

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

正如您所看到的，此处也存在关闭按钮问题，如果内容div变得大于对话框div，则会遇到溢出问题。

jQuery模式对话框不在SharePoint 2007中居中

3 个答案: