ホームページ > ウェブフロントエンド > htmlチュートリアル > 本文

CSSマスクの実装layer_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:52:02

オリジナル

1892 人が閲覧しました

偶然发现自己原来写了一个CSS遮罩层，虽然这个东西没什么技术含量，但如果本人离开公司后又遇见此类问题，那么可能又得花些时间来找资料了。所以决定还是把它记下来吧。 
直接上代码吧。 
第一步，html代码： 

Java代码  

1.   
2.    
     
3.       
4.          
5.        
6.     

  

    

  

  

                                  

  

  

《挂号须知》  

上記のコードは 3 つの部分で構成されており、「登録手順」リンクをクリックするとポップアップ レイヤーが表示されます。
そして、bg はマスクレイヤーを表します。つまり、ポップアップレイヤーが表示されると、レイヤーの後ろのコンテンツが覆われます。最後のは、表示されたリンクを参照します。
これら 3 つの部分の CSS クラスは次のとおりです。

CSS コード

1. .mydiv {
2. #FCF4EA;
3. border: 1px Solid #D00000;
4. text-align: center;
5. フォント-サイズ: 12px;
6. z-index:99;
7. left:30%;/*FF IE7*/ top: 20%;/*FF IE7*/
8. margin-left:-150px!重要;/ * FF IE7 この値は幅の半分です */
9. margin-top:-60px! important;/*FF IE7 この値は高さの半分です */
10. margin-top:0px;
11. Position:absolute;/ * FF IE7*/
12. }
13. width:700px;
14. height:400px;
15. text -align: left;
16. }
17. . bg {
18. #ccc;
19. フィルター:alpha(opacity=50);/*IE*/
20. 不透明度:0.5;/*FF*/
21. 位置:absolute;/ * IE6*/
22. }
非常に重要な部分があります。つまり、背景マスクレイヤーが全画面をカバーする必要があるということです。この問題は解決するのが難しいため、JQuery を使用して解決しました。 、ページの初期化時の bg を設定します。 サイズ:
Js code

.bg') .height($(document).height()); ;

function showDiv(orgId){

$("#orgNote").html(data);
$("#bg") . show(); : function(){
$("#bg").hide();
}