简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Heim > Web-Frontend > HTML-Tutorial > Hauptteil

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

WBOY
Freigeben： 2016-06-24 11:52:02
Original
1833 Leute haben es durchsucht

偶然发现自己原来写了一个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的东西也记不住几个，只能知道点就写下来了。

    Verwandte Etiketten：
    CSS遮罩层的实现
    Quelle：php.cn
    Vorheriger Artikel：ASP如何实现注册后发送激活邮件？_html/css_WEB-ITnose Nächster Artikel：如何将旋转90度的div中的每一个字再旋转回来_html/css_WEB-ITnose
    Erklärung dieser Website
    Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
    Neueste Artikel des Autors
    Aktuelle Ausgaben
    Generieren Sie Standardwerte und CSS-Variablen mit SCSS Ich setze Website-Styling um. Aus Gründen der Legacy-Unterstützung muss ich IE11 zumindest...
    Aus 2024-04-06 17:46:54
    0
    1
    355
    Unterer CSS-Rand in der Navigationsleiste Ich habe eine Navigationsleiste und habe unten eine rote Linie hinzugefügt, wenn der Mausz...
    Aus 2024-04-06 15:04:41
    0
    2
    347
    Passen Sie das Erscheinungsbild von Bootstrap-Akkordeon-Headern mithilfe der CollapseDisplay-Klasse an Ich möchte den Kartentitel eines Panels mit der Klasse Collapseshow formatieren. In diesem...
    Aus 2024-04-06 12:53:11
    0
    1
    376
    Stellen Sie sicher, dass der Container der Tabellenzelle die gesamte Höhe der übergeordneten Zelle ausfüllt Ich versuche, den Inhalt vertikal auszurichten, ohne Flexbox zu verwenden, da es bei unser...
    Aus 2024-04-04 16:03:18
    0
    1
    404
    Erstellen Sie einen Hover-Effekt, der die Menüschaltfläche mit einer schattierten Klonversion in eine X-Form umwandelt Zunächst möchte ich zugeben, dass mein Titel verwirrend ist, und das tut mir leid. Was ich...
    Aus 2024-04-04 11:55:21
    0
    2
    315
    verwandte Themen
    Mehr>
    Beliebte Empfehlungen
    Beliebte Tutorials
    Mehr>
    Verwandte Tutorials
    Beliebte Empfehlungen
    Aktuelle Kurse
    Neueste Downloads
    Mehr>
    Web-Effekte
    Quellcode der Website
    Website-Materialien
    Frontend-Vorlage
    Über uns Haftungsausschluss Sitemap
    Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！