検索

ホームページ  >  記事  >  ウェブフロントエンド  >  CSSマスクの実装layer_html/css_WEB-ITnose

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

WBOY
WBOYオリジナル
2016-06-24 11:52:021874ブラウズ

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

Java代码  

  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. }
      25. 非常に重要な部分があります。つまり、背景マスクレイヤーが全画面をカバーする必要があるということです。この問題は解決するのが難しいため、JQuery を使用して解決しました。 、ページの初期化時の bg を設定します。 サイズ:
      27. Js code
    $(function(){

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

    });

    function showDiv(orgId){

    regAsyncController.getOrgNotes(orgId,function(data){
      $("#orgNote").html(data);
      2. $("#bg") . show(); : function(){
      3. $("#bg").hide();
      4. }
    ページ関連のことをするので、CSS のことをいくつか覚えていないのですが、少しだけ知っていたので書き留めました。



    声明：
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    前の記事：ASP は登録後にアクティベーション電子メールをどのように送信しますか? _html/css_WEB-ITnose次の記事：ASP は登録後にアクティベーション電子メールをどのように送信しますか? _html/css_WEB-ITnose

    関連記事

    続きを見る