コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > htmlチュートリアル > 本文

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

WBOY
リリース： 2016-06-24 11:52:02
オリジナル
1877 人が閲覧しました

偶然发现自己原来写了一个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 のことをいくつか覚えていないのですが、少しだけ知っていたので書き留めました。



    関連ラベル：
    CSS遮罩层的实现
    ソース：php.cn
    前の記事：ASP は登録後にアクティベーション電子メールをどのように送信しますか? _html/css_WEB-ITnose 次の記事：90度回転したdiv内の各単語を回転させる方法 back_html/css_WEB-ITnose
    このウェブサイトの声明
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    著者別の最新記事
    最新の問題
    SCSSを使用してデフォルト値とCSS変数を生成する ウェブサイトのスタイリングを実装しています。レガシー サポートの理由から、少なくともしばらくの間は IE11 をサポートする必要があります。ワークフローと私の健全性の理由から、私は...
    から 2024-04-06 17:46:54
    0
    1
    355
    ナビゲーションバーの下枠のCSS ナビゲーション バーがあり、リスト内の項目にカーソルを置くと下部に赤い線を追加しましたが、その赤い線をタイトル (例: 「サービス」) の下に移動したいのですが、これを実現する方法...
    から 2024-04-06 15:04:41
    0
    2
    347
    CollapseDisplay クラスを使用してブートストラップ アコーディオン ヘッダーの外観をカスタマイズする class Collapseshow を使用してパネルのカード タイトルのスタイルを設定したいと考えています。この例では、最初のパネルです。 CSS を使用して .accordio...
    から 2024-04-06 12:53:11
    0
    1
    376
    表セルのコンテナが親セルの高さ全体を占めるようにしてください。 Flexboxを使用せずにコンテンツを垂直方向に整列させようとしています。このユースケースにはいくつかの問題があるため、垂直方向に整列されたテーブルでそれを行おうとしていますが、問...
    から 2024-04-04 16:03:18
    0
    1
    404
    影付きクローンバージョンでメニューボタンをX字型に変形させるホバーエフェクトを作成します まず初めに、タイトルが紛らわしいことを認めたいと思います。申し訳ありません。私が達成したいのは、ホバー時の次の効果です。私のウェブサイトはここです https://wordpres...
    から 2024-04-04 11:55:21
    0
    2
    315
    関連トピック
    詳細>
    人気のおすすめ
    人気のチュートリアル
    詳細>
    関連するチュートリアル
    人気のおすすめ
    最新のコース
    最新のダウンロード
    詳細>
    ウェブエフェクト
    公式サイト
    サイト素材
    フロントエンドテンプレート