SharePoint 2013 Pop-Up Dialogs

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

自定义弹出框

 

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

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

 

二. 步骤：

1. 准备工作：

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

[html] view plain copy print ?

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文件 

[html] view plain copy print ?

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.   
21. </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>

[html] view plain copy print ?

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. 调用实例：

[html] view plain copy print ?

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

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

三. 结果演示：

四. 源码

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

[html] view plain copy print ?

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.   
44. </style>  
45. <a href="http://www.baidu.com" class="dialog-pop">View Content</a>  
46. <br/>