Add a mask to your web page pop-up window

This article introduces you to the use of CSS to achieve web page masking effects. It mainly achieves the masking effect by controlling the display level of the two boxes, controlling the background color and display transparency of the mask layer. I hope it will be helpful to friends who are learning css.

Add a mask to your pop-up window

I believe that the mask layer effect is often encountered in many development needs. In a situation, there are many ways to achieve the mask layer effect. The simplest one is introduced below, using CSS to achieve the mask

dom node code:

<!-- 进度条遮罩 -->
<t:p id="shade" styleClass="shade" > </t:p>

CSS style code

.ui-progressbar{
                position: absolute;
                top:40%;
                left:40%;
                z-index: 99999999;
                width:500px;
                height:22px;
                line-height:22px;
                display:none;
            }
            .ui-progressbar-value 
            { 
                    background-image: url("../images/pbar-ani.gif"); 
                border:0px;
            }
            .shade
            {
               background:rgba(0, 0, 0, 0.4);
               width:100%;
               height:100%;
               position: absolute;
               z-index:99;
               left:0px;
               top:0px;
               opacity:0.6;
               filter:alpha(opacity=60);
               display:none; 
            }

Mainly achieves the masking effect by controlling the display levels of the two boxes, controlling the background color and display transparency of the mask layer.

The above is the detailed content of Add a mask to your web page pop-up window. For more information, please follow other related articles on the PHP Chinese website!