自定義彈出框
一. 項目需求: 自定義彈出框,包括彈出框的內容和樣式。
說明: 母版頁包括站點母版頁和系統母版頁,一般我們自定義的母版頁只需應用到站點上,而彈出框應用的母版是系統母版,所以,如果你的站點自定義母版沒有設置爲系統母版,那麼彈出框就會和你站點風格有差異,解決方法:設置你的自定義母版爲系統母版或者修改彈出框樣式。
二. 步驟:
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/