转:http://blog.csdn.net/tristan_dong/article/details/19076315
自定义弹出框
一. 项目需求: 自定义弹出框,包括弹出框的内容和样式。
说明: 母版页包括站点母版页和系统母版页,一般我们自定义的母版页只需应用到站点上,而弹出框应用的母版是系统母版,所以,如果你的站点自定义母版没有设置为系统母版,那么弹出框就会和你站点风格有差异,解决方法:设置你的自定义母版为系统母版或者修改弹出框样式。
二. 步骤:
1. 准备工作:
a. 点击按钮:这里用<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文件
- <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>
- <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. 调用实例:
- $(document).ready(function(){
- $('.dialog-pop').sharePop();
- });
三. 结果演示:
![](//img-blog.csdn.net/20140211143155406?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvVHJpc3Rhbl9Eb25n/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
四. 源码
注意:只需把下面代码加入Script Webpart即可
- <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js"></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>
- <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>
- <a href="http://www.baidu.com" class="dialog-pop">View Content</a>
- <br/>