未在SharePoint 2007中居中的jQuery模式对话框

在列表的AllItems页面上，我在显示列表的webpart上方添加了内容编辑器WebPart。这个webpart只包含一个HTML按钮。当用户点击按钮时，列表中的所有项目都将被多个JavaScript/jQuery/AJAX函数处理。但是该列表包含1000多个项目，并且不会让用户知道代码正在处理项目。未在SharePoint 2007中居中的jQuery模式对话框

首先，出于开发目的，我在方法之间使用警报来显示某种交互性并向用户提供信息。但是现在我正在使用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

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

来源

2013-02-27 Abbas

我在，我是在尝试升级到最新的应用程序完全相同的问题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-05 03:34:21 Chris

问题是我无法使用较低版本的jQuery/UI。还有其他代码片断取决于我使用的版本... – Abbas 2013-03-05 09:25:03

我在这里创建了一个非常简化的版本，您可以测试。它看起来像从样式中，一些jquery-ui项目没有正确加载，你看过Chrome的调试器/萤火虫的“网络”部分，看看是否有任何项目没有被加载？

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}); 
}

你试过手动改变对话框DOM元素与CSS来居中，就像这样：

.center 
{ 
    margin-left:auto; 
    margin-right:auto; 
    width:70%; 
}

来源

2013-02-27 12:44:39 jjay225

谢谢你的想法，但是这给出了和我一样的结果。 – Abbas 2013-02-27 13:20:38

上面更新了我的回答，你有没有尝试过一些手动的CSS干预？ – jjay225 2013-02-27 13:30:44

不，CSS不会改变任何东西...：S – Abbas 2013-02-27 15:21:37

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

在这种情况下，我更喜欢使用custom js，因为它更灵活。居中的div你应该改变显示按钮的onclick行为如下：

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

正如你可以看到你也已经在这里有关闭按钮的问题，以后如果内容格比对话框的div更大会遇到溢出问题。

来源

2013-04-19 11:22:29 Jemdo

未在SharePoint 2007中居中的jQuery模式对话框

回答

相关问题