简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
집 > 웹 프론트엔드 > HTML 튜토리얼 > 본문

CSS遮罩层的实现_html/css_WEB-ITnose

WBOY
풀어 주다： 2016-06-24 11:52:02
원래의
1833명이 탐색했습니다.

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

Java代码  

  1.   
  2.    
      
  3.       
  4.        CSS遮罩层的实现_html/css_WEB-ITnose  
  5.        
  6.     
  
  •     
      
    •   
  •                                   
  •   
  •   
  • 《挂号须知》  
    •   


    上面的代码由三部分构成，popDiv表示弹出层，即单击“挂号须知”链接时弹出。 
    而bg表示遮罩层，即弹出层显示时将层后面的内容遮住。最后就是指显示的链接。 
    这三部分的CSS类如下： 

    Css代码  

    1. .mydiv {    
    2.     #FCF4EA;    
    3.     border: 1px solid #D00000;  
    4.     text-align: center;    
    5.     font-size: 12px;    
    6.     z-index:99;  
    7.     left:30%;/*FF IE7*/    
    8.     top: 20%;/*FF IE7*/    
    9.     margin-left:-150px!important;/*FF IE7 该值为本身宽的一半 */    
    10.     margin-top:-60px!important;/*FF IE7 该值为本身高的一半*/    
    11.     margin-top:0px;    
    12.     position:absolute;/*FF IE7*/    
    13. }  
    14. .note_div{  
    15.     width:700px;  
    16.     height:400px;  
    17.     overflow:scroll;  
    18.     text-align: left;  
    19.     padding:15px;  
    20. }  
    21. .bg {    
    22.     #ccc;  
    23.     filter:alpha(opacity=50);/*IE*/    
    24.     opacity:0.5;/*FF*/    
    25.     z-index:1;  
    26.     position:absolute;/*IE6*/  
    27. }  


    有个部分很重要，那就是bg遮罩层的要覆盖全屏的问题，这个东西比较难解决，所以借助了JQuery来解决，即页面初始化时再设置bg的大小： 

    Js代码  

    1. $(function(){  
    2.         $(".bg").width($(document).width());  
    3.         $('.bg').height($(document).height());  
    4.         $('.bg').css('left',0);     
    5.         $('.bg').css('top',0);  
    6.     });  



    有了上面的基础之后，只需要在单击链接时通过ajax回调来设置需要显示的数据及遮罩层，如下： 

    Js代码  

    1. function showDiv(orgId){    
    2.     regAsyncController.getOrgNotes(orgId,function(data){  
    3.         $("#orgNote").html(data);  
    4.         $("#bg").show();  
    5.         $("#popDiv").fadeIn(1000);  
    6.     });  
    7. }    
    8. function closeDiv(){  
    9.     $("#popDiv").fadeOut(1000,function(){  
    10.         $("#bg").hide();  
    11.     });  
    12. }    


    这个过程其实比较简单，但本人并不经常搞页面的东西，所以CSS的东西也记不住几个，只能知道点就写下来了。

    관련 라벨：
    CSS遮罩层的实现
    원천：php.cn
    이전 기사：ASP如何实现注册后发送激活邮件？_html/css_WEB-ITnose 다음 기사：如何将旋转90度的div中的每一个字再旋转回来_html/css_WEB-ITnose
    본 웹사이트의 성명
    본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
    저자별 최신 기사
    최신 이슈
    SCSS를 사용하여 기본값 및 CSS 변수 생성 웹사이트 스타일링을 구현하고 있습니다. 레거시 지원상의 이유로 적어도 한동안은 IE11을 지원해야 합니다. 작업 흐름과 제정신의 이유로 가능할 때마다 CSS 변수...
    에서 2024-04-06 17:46:54
    0
    1
    355
    탐색 모음의 CSS 하단 테두리 탐색 모음이 있고 목록의 항목을 마우스로 가리키면 하단에 빨간색 선을 추가했지만 제목(예: "서비스") 아래로 빨간색 선을 이동하고 싶습니다. ...
    에서 2024-04-06 15:04:41
    0
    2
    347
    CollapseDisplay 클래스를 사용하여 Bootstrap 아코디언 헤더의 모양을 사용자 정의하세요. 클래스 Collapseshow를 사용하여 패널의 카드 제목 스타일을 지정하고 싶습니다. 이 예에서는 첫 번째 패널입니다. CSS를 사용하여 .accordion.c...
    에서 2024-04-06 12:53:11
    0
    1
    376
    테이블 셀의 컨테이너가 상위 셀의 전체 높이를 채우는지 확인하세요. Flexbox를 사용하지 않고 콘텐츠를 세로로 정렬하려고 하는데, 우리 사용 사례에 문제가 있어서 세로로 정렬된 테이블로 하려고 하는데 문제는 그 안의 콘텐츠가 ...
    에서 2024-04-04 16:03:18
    0
    1
    404
    그림자 복제 버전으로 메뉴 버튼을 x 모양으로 변환하는 호버 효과 만들기 먼저 제 제목이 혼란스럽다는 점을 인정하고 죄송합니다. 내가 달성하고 싶은 것은 hover에 대한 다음과 같은 효과입니다. 내 웹 사이트는 여기 https://w...
    에서 2024-04-04 11:55:21
    0
    2
    315
    관련 주제
    더>
    인기 추천
    인기 튜토리얼
    더>
    관련 튜토리얼
    인기 추천
    최신 강좌
    최신 다운로드
    더>
    웹 효과
    웹사이트 소스 코드
    웹사이트 자료
    프론트엔드 템플릿
    회사 소개 부인 성명 Sitemap
    PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！