SharePoint 2013 Pop-Up Dialogs

自定义弹出框

 

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

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

 

二. 步骤：

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

三. 结果演示：

四. 源码

注意：只需把下面代码加入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/>

 详情见：http://kyleschaeffer.com/sharepoint/sharepoint-2010-pop-up-dialogs/