偶然發現自己原來寫了一個CSS遮罩層，雖然這個東西沒什么技術含量，但如果本人離開公司后又遇見此類問題，那么可能又得花些時間來找資料了。所以決定還是把它記下來吧。
直接上代碼吧。
第一步，html代碼：
- <div id="popDiv" class="mydiv" style="display:none;">
- <div style="text-align:right">
- <a href="javascript:closeDiv()">
- <img src="/ams/images/yygh_a/close.gif"/>
- </a>
- </div>
- <div id='orgNote' class="note_div"></div>
- </div>
-
- <div id="bg" class="bg" style="display:none;"></div>
- <div style="margin-left: 180px;">
- <a title="即時了解掛號、退號信息" style="margin-left:0px;#FFFF66;font-size: 16px;text-decoration: underline !important;" href='javascript:showDiv(${doctor.orgId})'>《掛號須知》</a>
- </div>
上面的代碼由三部分構成，popDiv表示彈出層，即單擊“掛號須知”鏈接時彈出。
而bg表示遮罩層，即彈出層顯示時將層后面的內容遮住。最后就是指顯示的鏈接。
這三部分的CSS類如下：
- .mydiv {
- #FCF4EA;
- border: 1px solid #D00000;
- text-align: center;
- font-size: 12px;
- z-index:99;
- left:30%;/*FF IE7*/
- top: 20%;/*FF IE7*/
- margin-left:-150px!important;/*FF IE7 該值為本身寬的一半 */
- margin-top:-60px!important;/*FF IE7 該值為本身高的一半*/
- margin-top:0px;
- position:absolute;/*FF IE7*/
- }
- .note_div{
- width:700px;
- height:400px;
- overflow:scroll;
- text-align: left;
- padding:15px;
- }
- .bg {
- #ccc;
- filter:alpha(opacity=50);/*IE*/
- opacity:0.5;/*FF*/
- z-index:1;
- position:absolute;/*IE6*/
- }
有個部分很重要，那就是bg遮罩層的要覆蓋全屏的問題，這個東西比較難解決，所以借助了JQuery來解決，即頁面初始化時再設置bg的大?。?nbsp;
- $(function(){
- $(".bg").width($(document).width());
- $('.bg').height($(document).height());
- $('.bg').css('left',0);
- $('.bg').css('top',0);
- });
有了上面的基礎之后，只需要在單擊鏈接時通過ajax回調來設置需要顯示的數據及遮罩層，如下：
- function showDiv(orgId){
- regAsyncController.getOrgNotes(orgId,function(data){
- $("#orgNote").html(data);
- $("#bg").show();
- $("#popDiv").fadeIn(1000);
- });
- }
- function closeDiv(){
- $("#popDiv").fadeOut(1000,function(){
- $("#bg").hide();
- });
- }
這個過程其實比較簡單，但本人并不經常搞頁面的東西，所以CSS的東西也記不住幾個，只能知道點就寫下來了。
本站僅提供存儲服務，所有內容均由用戶發布，如發現有害或侵權內容，請
點擊舉報。
