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/