前言：
這是在上周的工作中的一些小心得，平時用到的地方也很多，希望可以給大家一些啟發和幫助。
1、 DIV彈出層遮蓋
解析：
這是一個比較常見問題，有很多的網站的注冊、或者登錄都是用這種彈出遮蓋層的方式來解決的。以前也有研究過這個東西，在網上也有各種各樣的源碼、JS腳本之類的東西，但總是覺得太麻煩，因為本身這個東西就只是一個談層遮蓋而已，我覺得不應該要寫那么多的代碼，昨天加班忙了一天，也遇到了這個問題，然后就有了一個比較好的解決方法，這里和大家分享一下，希望能對大家有所幫助。
頁面布局：
<div>
<ul>
<li>矜持</li>
<li>
<ul>
<li>我從來不曾抗拒你的魅力</li>
<li>雖然你從來不曾對我著迷</li>
<li>我總是微笑的看著你</li>
<li>我的情意總是輕易就洋溢眼底</li>
<li>我曾經想過在寂寞的夜里</li>
<li>你終於在意在我的房間里</li>
</ul>
</li>
</ul>
<a href="#" onclick="javascript:document.getElementById('zhegaiceng').style.display='block';document.getElementById('show')
.style.display='block';">點擊遮蓋</a>
</div>
<div id="show">
<ul>
<li>我曾經想過在寂寞的夜里</li>
<li>你終於在意在我的房間里</li>
<li>你閉上眼睛親吻了我</li>
<li>不說一句緊緊抱我在你懷里</li>
</ul>
<a href="javascript:void(0)" onclick="javascript:document.getElementById('zhegaiceng').style.display='none';document.getElementById('show')
.style.display='none';">關閉遮蓋</a>
</div>
<div class="shadow" id="zhegaiceng">
</div>
樣式：
<style type="text/css">
.shadow{position:absolute;left:0;top:0; z-index:10; width:100%; height:100%;filter:alpha(opacity=80); display:none; background:blue; }
#show{ position:absolute; top:10px;left:400px;width:200px; height:400px;display:none; z-index:11; }
</style>
說明：
1) .shadow樣式主要用來修飾遮蓋的(id為”zhegaiceng”)層,這里需要注意的幾個屬性是：
position，需要將其設為absolute，為絕對定位，
z-index屬性，該值主要用來顯示層的顯示層次，值越大，越顯示在最上邊
寬和高：設置為100%，用來將整個屏幕遮蓋，
Top/left：設置彈出遮蓋層的位置，一般將其設為0，0
Filter:alpha(opacity=80)該屬性用來將彈出層的背景色設置為半透明狀，即在遮罩的同時還可以看到遮蓋層下的內容
display：默認都是none，不顯示，當用戶進行一些點擊操作，比如登錄時,才彈出層顯示
示例效果：
點擊之前：
點擊之后：
2) #show樣式主要用來修飾顯示在彈出層之上的內容，這里顯示的是一個div，該樣式也有幾個屬性需要設置：
Position：也需將設為絕對定位
z-index：在為該屬性設值時，一定要注意值一定要比彈出層樣式(.shadow)的z-index值大，只有這樣它才能顯示出來，且可供用戶操作，否則將被遮蓋或無法顯示
top/left：設置要顯示的層的位置，一般都居中設置
display：默認都是none，不顯示，當用戶進行一些點擊操作，比如登錄時：才談層顯示
2、Div背景色、透明、漸變
解析：
在上一個問題中，我們在樣式了用到了filter屬性，以此來實現遮罩透明的效果
這里額外的講一下filter屬性，從字面意思看，就是一個過濾，可以通過alpha提供的一些參數的組合實現div背景色的透明漸變。
filter:alpha(opactiy=10,enabled=true,style=2,finishOpacity=80, startX=20 , startY=20 , finishX=400 , finishY=400 );
如上的filter示例，我會一一將其代表的含義跟大家講解清楚：
Opacity=10；用來表示透明漸變的透明度，取值范圍：0-100，值越大，透明度越低，值為100時，完全不透明
Enabled=true；設置濾鏡是否激活，true為激活
Style=1；指定了透明區域的形狀特征。其中0代表統一形狀；1代表線形；2代表放射狀；3代表長方形
FinishOpacity=80；用來設置結束時的透明度，達到一種漸變效果，取值范圍也是0-100。
StartX和StartY代表漸變透明效果的開始坐標，finishX和finishY代表漸變透明效果的結束坐標。
這里就不再做具體的演示了，希望有興趣的朋友可以自己在下邊練習一下，不過我們平時所用的一般都只是將背景色設為透明即可。
備注：
使用filter的屬性設置背景色時，在IE瀏覽器下沒有任何的問題，但是在360瀏覽器下，設置的背景色不起作用，會完全的遮蓋，希望朋友們知道這些，我在下邊做測試的時候，測試了好久都沒出現半透明的效果，最后發現是瀏覽器的問題，希望朋友們可以少走些彎路。
1、 JS調用Sharepoint2010中的SP.UI.ModalDialog彈出遮蓋層顯示
解析：
在SharePoint里邊，幾乎所有的新增、編輯操作都是通過彈出層的方式來展現的，這樣的展現方式可以帶來很好的用戶體驗，剛好上周的項目中也有用到，對sharepoint，我也是近期才剛剛接觸，通過學習和研究，基本上已經很熟練的掌握了使用js調用Sharepoint的ModalDialo彈層顯示，這里就和大家一一講解一下如何使用。
1、 這里有兩個頁面，一個是調用頁DiaoYong.aspx，一個是被調用頁BeDiaoYong.aspx
示例場景如下：我們點擊調用頁的一個按鈕，然后彈層被調用頁，同時向被調用頁傳遞一個參數，這一場景可以用在比如：列表頁點擊某一項時，進行編輯
2、 調用頁操作：
我們可以為要被點擊的按鈕設置一個客戶端的OnclientClick事件，如下：
<asp:Button ID="btnShowDialog" runat="server" Text="編輯" OnClientClick="retrun OpenClient()" />
<script type="text/javascript">
function OpenClient() {
var options = {
url: ’BeDiaoYong.aspx?ID=116′,
args: null,
title: ‘編輯信息’,
dialogReturnValueCallback: dialogCallback
};
SP.UI.ModalDialog.showModalDialog(options);
}
3、 下邊主要 options各個參數的意義
url：即要打開頁的鏈接，如果需要像另一個頁傳遞參數可以直接在鏈接里邊加
args：這個參數表示像另一個頁面傳遞一個值，可以通過方式獲取在另一個頁獲取該值
title：被調用頁顯示的標題
dialogReturnValueCallback：在另一個頁關閉時的調用的回調函數，比如，調用另一個頁新增了一條數據信息時，可以調用該回調函數，在里邊進行設置刷新父頁面，就可以馬上在List頁里顯示新增數據
除此之外，option還可以設置一些其他的參數比如：width、height等，可以用來設置彈出層顯示頁的大小，這里就不在做演示了
4、 在被調用頁，即彈出層頁，可以使用以下的方式來接受傳遞過來的參數
1) 如果是在url里通過get的方式傳值，則可以Requert[“ID”]的方式獲取傳遞過來的值
2) 如果是通過在options 里為arge參數賦值的方式，則可以使用以下方式獲得傳遞進來的值：
Var id = window.frameElement.dialogArgs;
但是這樣的方式只能在前台獲取傳遞的值
3) 上邊有提到回調函數dialogCallback函數，可以通過此函數像調用頁傳遞值
該函數的常用形式如下：
function dialogCallback (dialogResult, returnValue) {
if(dialogResult == SP.UI.DialogResult.ok){
// The user clicked the OK button.
// handle commitPopup
} else{
// The user clicked the Cancel button.
// handle cancelPopup
}
}
例如我們上邊提到的如果我們新增或者修改了一條信息，要對列表也進行重新的綁定，邊可以在該函數里進行頁面的刷新
5、 關閉彈出層頁
1) window.frameElement.cancelPopUp(),調用該方法，將關閉窗口。返回值result是：SP.UI.DialogResult.cancel
2) window.frameElement.commitPop up(),調用該方法，將關閉窗口。返回值result是： SP.UI.DialogResult.ok
3) window.frameElement.commonModalDialogClose()，同上，不過返回值是指定的第二個參數returnValue的值
好了，今天的總結就到這里了，這些天都比較忙，繼續奮斗吧！Here we go！