SharePoint 2010 Pop-Up Dialogs SharePoint 2010 弹出对话框

SharePoint 2010 使得往你的网站添加对话框内容变得出乎意料的简单。内置的功能允许你从站点任何地方抽取内容，然后显示在模态对话框中，出现在页面的前端。当它涉及到现代Web技术的时候，这就是很标准的东东啦，但是易用性是真正使SharePoint对话框变得如此引人的主要原因。本文中，我们将探讨SharePoint 2010 平台带来的对话框功能，并且我们会发现自定义内容的新方法，来给你的SharePoint门户带来独特的新鲜外观体验。

SharePoint 2010 中的对话框

尽管（可能）你已经选择不去理解SharePoint 2010 中的对话框，他们也已经在整个SharePoint平台上应用了，比如页面、列表和库。例如，每一次你创建新页面，你将看到页面上出现的对话框。几乎就是这样子的。

当你创建和编辑列表项目时，你将看到类似的对话框，以及在网站集中创建的任何文档库中也是如此。这些弹出窗体和视图时SharePoint 2010 平台整体的一部分。

工作原理

SharePoint 2010 对话框非常的简单。它们基本上是一个JavaScript弹出对话框，其中包含一个iframe从网站其他地方请求内容。这个内容可以是SharePoint内部任何东东，甚至是发布页面或者你自己创建的自定义应用程序页面。

如果你曾经在SharePoint 2010中创建自己的母版页，当你尝试着应用你的新母版页到网站时，面对两个选项，你可能已经迷惑了。SharePoint 2010 在网站模板页和系统母版页之间分离了你的母版页授权。基本上，你的网站模板页应用到页面、列表和库中，而系统母版页应用到其他地方（设置、权限、管理及对话框等）。当你在SharePoint 2010 中调用弹出对话框时，内容被请求并使用系统母版页显示。如果你想开始自定义你的对话框在SharePoint 2010中出现的方式，首先你要设置自定义的母版页格式也作为系统母版页起作用。

系统母版页

如果你想最优化母版页来使用对话框，最重要的事就是设计在对话框时图中哪些页面元素应该隐藏掉。如果你打开微软的v4.master文件，你可能注意到class="s4-notdlg"出现在文件中很多地方。这个s4-notdlg类名应该应用到你想要在对话框视图中隐藏的东东上面。这意味着标题、页脚、导航、侧边栏等等。基本上，你会想要添加这个CSS类到所有的东东上，除了你设计的主要内容区域。当对话框显示时，任何具有s4-notdlg CSS类的东东都会被自动隐藏（缩减）掉。

使用样式

你的设计很可能有一个固定的宽度，或者至少有个最小显示宽度。对话框很小，所以宽度和大小格式不一定在对话框视图中完美呈现。幸运的是，任何时候你的母版页被用来显示对话框内容，html元素获得特殊的CSS类名ms-dialog。你可以使用它覆盖任何之前设置的样式，使得它在普通和对话框视图中正确显示。例如，你可能有一个div元素（ID为wrapper）在你的设计中。在附加的CSS文件中，你可以给这个元素添加样式（当它出现在普通和对话框时图中时）

#wrapper {
  width: 960px;
  margin: auto;
}
html.ms-dialog #wrapper {
  width: 100%;
}

上面这个例子中，wraper元素将切换为自动宽度，出现在SharePoint 2010 对话框中。你可能不得不使用这个技术处理列、背景色以及其他出现在对话框中的设计元素。

使用这个功能

既然你的母版页最优化为了对话框使用，现在是时候从你的SharePoint网站中抽取一些内容出来了。创建一个Popup链接非常简单。在任何页面或者内容编辑器WebPart中，创建一个链接请求一个对话框页面：

<a href="javascript:OpenPopUpPage('/path/to/content.aspx');">Show Me the Pop-Up!</a>

你可以使用OpenPopUpPage函数以对话框模式查看任何内容。也有一个更加灵活的函数OpenWebPage，允许你指定对话框宽度和高度。使用这些函数配合自定义系统母版页，你在SharePoint中对话框显示的东东就变得限制越来越来越少。

渐进增强

我很关心可访问性，而且我真的不喜欢有人要求我在链接元素中添加javascript:。没有JavaScript的用户不能访问这个链接。更重要的是，像Google或Bing的搜索引擎不能跟踪你站点内的内容关联。这可能是个很大的问题，并且因此，我也不会推荐你在SharePoint 站点中对话框里使用以上的方法。

一个更好的方法涉及到一个在渐进增强方面的练习。渐进增强要求你给用户创建解决方案时，要在浏览器中启用尽可能少的功能。这意味着创建简单的HTML链接指向真正的网页内容。通过创建简单的HTML链接，你可以保证每个人（包括搜索引擎）可以辨认和使用你站点中的链接。对于其他用户，如启用JavaScript的用户，你可以使用弹出对话框来更快的显示内容，增强他们的体验。

这在SharePoint 2010中非常简单，只是因为我们自定义的母版页已经被格式化来显示正常和对话框时图的内容了。我们可以轻松引导用户到内容的普通视图，并且为站点中启用脚本的用户覆盖那个功能。

SharePoint和弹出框整合

在真正的渐进增强样式中，我已经创建了一个简单的jQuery函数，将站点中任何普通链接转化为弹出对话框链接，只是通过关联一个CSS类。添加这个功能到你的SharePoint 2010 站点中：

1. 确保jQuery script library被附加到母版页或页面布局中。

2. 添加下面jQuery函数到附加的JavaScript文件中：

(function($){
  $.fn.sharePop = function(){
    if(typeof OpenPopUpPage == 'function'){
      return this.each(function(i){
        if($(this).attr('href') != null){
          $(this).click(function(e){
            e.preventDefault();
            OpenPopUpPage($(this).attr('href'));
          });
        }
      });
    }
    else{
      return false;
    }
  };
})(jQuery);

3. 添加一个独特的CSS类名到要显示对话框视图的链接：

<a href="/path/to/content.aspx" class="dialog-pop">View Content</a>

4. 运行脚本（添加到附加的JavaScript文件中）：

$(document).ready(function(){
	$('.dialog-pop').sharePop();
});

我的脚本将覆盖这些链接的默认功能，强制它们显示SharePoint 2010 对话框视图。那些没有使用JavaScript的用户也可以访问到内容（使用普通视图）。

对话框样式

最后一个要考虑的事情就是对话框的样式了。对话框HTML给你了许多CSS类，允许你完全自定义对话框窗口的外观，并且甚至是后面阴影区域的外观。下面图片显示了SharePoint对话框的HTML，并且我也高光了一些重要的CSS类，你会用到它们改变窗口的外观的。

使用这些类，你可以创建对话框一个独特的外观。这里是一个黑色主题对话框的例子。

.ms-dlgOverlay {
  background-color: #333;
}
.ms-dlgContent {
  border: 0;
}
.ms-dlgBorder {
  border: 1px solid #333;
}
.ms-dlgTitle {
  background-color: #333;
}
.ms-dlgTitleText {
  display: block;
  font-weight: bold;
  font-size: 13px;
  padding: 7px;
}

添加CSS到附加的CSS样式表后，我们获得一个完全自定义的对话框外观，伴随着自定义内容出现在对话框内部。