search

Home  >  Article  >  Web Front-end  >  Implementation of CSS mask layer_html/css_WEB-ITnose

Implementation of CSS mask layer_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:52:021874browse

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

Java代码  

  2.    
      
  3.       
  4.          
  5.        
  6.     
  
  •     
      
  •   
  •                                   
  •   
  •   
  • 《挂号须知》  


  • The above code consists of three parts. popDiv represents the pop-up layer, which pops up when the "Registration Instructions" link is clicked.
    And bg represents the mask layer, that is, when the pop-up layer is displayed, the content behind the layer is covered. The last one refers to the displayed link.
    The CSS classes of these three parts are as follows:

    Css code

    1. .mydiv {
    2. #FCF4EA; Or>
      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 This value is half of its width */  
      10. margin-top:-60px!important;/*FF IE7 This value is half of its height*/  
      11.  margin-top:0px;
      12. position:absolute;/*FF IE7*/
      13. }
      14. .note_div{
      15. width: 700px; 400px;
      16. overflow:scroll;
      17. text-align: left;
      18. padding:15px;
      19. #ccc;
      20. filter:alpha(opacity=50);/*IE*/
      21. opacity:0.5;/*FF*/
      22. z-index:1;
      23. position:absolute;/*IE6*/
      24. }
    26. There is a very important part, that The problem is that the bg mask layer needs to cover the full screen. This thing is difficult to solve, so we use JQuery to solve it, that is, set the size of the bg when the page is initialized:
    Js code


    $(function(){

    $(".bg").width($(document).width());

    $ ('.bg').height($(document).height());
      $('.bg').css('left',0); '.bg').css('top',0);
      2. });
    4. After having the above foundation, only You need to set the data and mask layer to be displayed through ajax callback when clicking the link, as follows:
      7. Js code


    function showDiv (orgId){                                                                                    bg").show();

    $("#popDiv").fadeIn(1000);

    });

    } closeDiv(){
      $("#popDiv").fadeOut(1000,function(){
      2. $("#bg").hide();
      3. });
      4. } 
    6. This process is actually relatively simple, but I don’t often do page stuff, so I can’t remember much about CSS. I just knew a little bit and wrote it down.


    Statement：
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
    Previous article：How does ASP send activation emails after registration? _html/css_WEB-ITnoseNext article：How does ASP send activation emails after registration? _html/css_WEB-ITnose

    Related articles

    See more