窗口调整大小时移动元素

Question

我有一个覆盖窗口的模型弹出窗口。当此div处于活动状态时，当我调整窗口大小时，此div的内容元素会移动。

css代码：

     .modalBackground {

                background-color: #808080;
                filter: alpha(opacity=40);
                /*opacity:0.5;  */
                position: fixed;
                left: 0;
                top: 0;
                z-index: 10;
                width: 100%;
                height: 100%;
                background-color: rgba(0,0,0,0.4);
            }
 .progress 
        { 
            position:relative; 
            width:445px; 
            border: 1px solid #ddd;
            padding: 1px; 
            border-radius: 3px; 
            margin-left:35%; 
            background-color:transparent !important; 
            margin-top:4%;
            text-align:center !important;
        }

        .bar 
        { 
            background-color:  #B4F5B4 !important; 
            width:50%; 
            height:20px; 
            border-radius: 3px; 
            background-image: linear-gradient(to bottom,#EA7350,#FF662F) !important;
        }

        .percent 
        { 
            position:absolute; 
            display:inline-block; 
            top:3px; 
            left:48%; 
            color:black; 

        }

此css的Html代码

 <div id="popupdiv" class="modalBackground"> @* style="display:none;"  *@
                            <div style="text-align: center; padding-top: 20%;">

                                     <div class="progress" >
                                        <div class="bar"></div >
                                        <div class="percent">0%</div >
                                    </div>

                                <input type="button" id="cancel" class="gray-btn" name="Cancel" value="Cancel Upload.."   onclick="textHiddenCancel.value = 'cancel';" style="width:8%; margin-left:55%; background-color:#E2611E!important;"/>

                             </div>

                        </div>

做过研究，但还没有找到任何解决方案。请帮我解决这个问题。 link

Answer 1

.modalBackground {

                background-color: #808080;
                filter: alpha(opacity=40);
                /*opacity:0.5;  */
                position: fixed;
                left: 0;
                top: 0;
                z-index: 10;
                width: 100%;
                height: 100%;
                background-color: rgba(0,0,0,0.4);
            }
 .progress 
        { 
            position:relative; 
            width:30%; 
            border: 1px solid #ddd;
            padding: 1px; 
            border-radius: 3px; 
            margin-left:35%; 
            background-color:transparent !important; 
            margin-top:4%;
            text-align:center !important;
        }

        .bar 
        { 
            background-color:  #B4F5B4 !important; 
            width:50%; 
            height:20px; 
            border-radius: 3px; 
            background-image: linear-gradient(to bottom,#EA7350,#FF662F) !important;
        }

        .percent 
        { 
            position:absolute; 
            display:inline-block; 
            top:3px; 
            left:48%; 
            color:black; 

        }

<div id="popupdiv" class="modalBackground"> @* style="display:none;"  *@
                            <div style="text-align: center; padding-top: 20%;">

                                     <div class="progress" >
                                        <div class="bar"></div >
                                        <div class="percent">0%</div >
                                    </div>

                                <input type="button" id="cancel" class="gray-btn" name="Cancel" value="Cancel Upload.."   onclick="textHiddenCancel.value = 'cancel';" style="width:8%; margin-left:55%; background-color:#E2611E!important;"/>

                             </div>

                        </div>

尝试宽度百分比