SharePoint 2013 Pop-Up Dialogs

2023-08-12 21:31:16

转：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>

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

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

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

$(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/>

码农公寓