SharePoint 2013 Pop-Up Dialogs

转：http://blog.csdn.net/tristan_dong/article/details/19076315

自定义弹出框

一. 项目需求： 自定义弹出框，包括弹出框的内容和样式。

说明： 母版页包括站点母版页和系统母版页，一般我们自定义的母版页只需应用到站点上，而弹出框应用的母版是系统母版，所以，如果你的站点自定义母版没有设置为系统母版，那么弹出框就会和你站点风格有差异，解决方法：设置你的自定义母版为系统母版或者修改弹出框样式。

二. 步骤：

1. 准备工作：

a. 点击按钮：这里用<a>标签：

1. <a href="http://www.baidu.com" class="dialog-pop">Show Me the Pop-Up</a>

<a href="http://www.baidu.com" class="dialog-pop">Show Me the Pop-Up</a>

b. 弹出框内容：可以自定html文件，上传到sharepoint站点。这里我直接用“http://www.baidu.com”

c. 弹出框样式： 自定义CSS文件

1. <style>
2. .ms-dlgOverlay {
3. background-color: #333;
4. }
5. .ms-dlgContent {
6. border: 0;
7. }
8. .ms-dlgBorder {
9. border: 1px solid #333;
10. }
11. .ms-dlgTitle {
12. background-color: #333;
13. }
14. .ms-dlgTitleText {
15. display: block;
16. font-weight: bold;
17. font-size: 13px;
18. padding: 7px;
19. }
20. </style>

<style>
.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;
}

</style>

d. js代码：我重写OpenPopUpPage方法，给jQuery库添加自定义函数sharePop，方便以后直接调用。

注意：原本只需简单的调用该方法就可以实现同样的效果，如下蓝色字体

//  <a href="javascript:OpenPopUpPage('http://www.baidu.com');">Show Me the Pop-Up!</a>

1. <script>
2. (function($){
3. $.fn.sharePop = function(){
4. if(typeof OpenPopUpPage == 'function'){
5. return this.each(function(i){
6. if($(this).attr('href') != null){
7. $(this).click(function(e){
8. e.preventDefault();
9. OpenPopUpPage($(this).attr('href'));
10. });
11. }
12. });
13. }
14. else{
15. return false;
16. }
17. };
18. })(jQuery);
19. $(document).ready(function(){
20. $('.dialog-pop').sharePop();
21. });
22. </script>

<script>
(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);
$(document).ready(function(){
	$('.dialog-pop').sharePop();
});
</script>

e. 调用实例：

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

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

三. 结果演示：

四. 源码

注意：只需把下面代码加入Script Webpart即可

1. <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js"></script>
2. <script>
3. (function($){
4. $.fn.sharePop = function(){
5. if(typeof OpenPopUpPage == 'function'){
6. return this.each(function(i){
7. if($(this).attr('href') != null){
8. $(this).click(function(e){
9. e.preventDefault();
10. OpenPopUpPage($(this).attr('href'));
11. });
12. }
13. });
14. }
15. else{
16. return false;
17. }
18. };
19. })(jQuery);
20. $(document).ready(function(){
21. $('.dialog-pop').sharePop();
22. });
23. </script>
24. <style>
25. .ms-dlgOverlay {
26. background-color: #333;
27. }
28. .ms-dlgContent {
29. border: 0;
30. }
31. .ms-dlgBorder {
32. border: 1px solid #333;
33. }
34. .ms-dlgTitle {
35. background-color: #333;
36. }
37. .ms-dlgTitleText {
38. display: block;
39. font-weight: bold;
40. font-size: 13px;
41. padding: 7px;
42. }
43. </style>
44. <a href="http://www.baidu.com" class="dialog-pop">View Content</a>
45. <br/>