天天看點

添加div彈框 + 遮罩

<style type="text/css">     .requirement-accepted-hint-templet .l,.requirement-accepted-hint-templet .left{         float: left;     }     .requirement-accepted-hint-templet .r,.requirement-accepted-hint-templet .right{         float: right;     }     .requirement-accepted-hint-templet-content-class-name{         position: fixed;         width: 450px;         height: 215px;         left: 50%;         top: 50%;         background-color: #ffffff;         z-index: 2015;         margin-left: -225px;         margin-top: -75px;         color: #f9f9f9;         font-size: 12px;         border: 1px solid #f0f0f0;     }     .requirement-accepted-hint-templet-content-title{         height: 35px;         font-size: 14px;         font-weight: bold;         color: #3e84bf;         line-height: 35px;     }     .requirement-accepted-hint-templet-content-title .l {         margin-left: 10px;     }     .requirement-accepted-hint-templet-content-title .r{         width: 30px;         height: 30px;         margin-right: 5px;         margin-top: 2px;         text-align: center;         line-height: 30px;     }     .requirement-accepted-hint-templet-content-title .r :hover {         background-color: #3e84bf;         color: #FFFFFF;     }     .requirement-accepted-hint-templet-content-title .r input{         width: 30px;         height: 30px;         background-color: #FFFFFF;         border: none;         font-size: 20px;         color: #3e84bf;     }     .requirement-accepted-hint-templet-content-text{         height: 130px;     }     .requirement-accepted-hint-templet-foot{         height: 40px;         color: #3e84bf;         line-height: 40px;     }     .requirement-accepted-hint-templet-foot .r {         margin-right: 10px;     }     .requirement-accepted-hint-templet-foot .requirement-accepted-hint-templet-foot-button input {         width: 70px;         height: 30px;         background-color: #FFFFFF;         border: 1px solid #3e84bf;         border-radius: 4px;         font-size: 14px;         color: #3e84bf;     }     .requirement-accepted-hint-templet-foot .requirement-accepted-hint-templet-foot-submit input {         background-color: #3e84bf;         color: #FFFFFF;     }     .requirement-accepted-hint-templet-foot .requirement-accepted-hint-templet-foot-cancel :hover {         background-color: #3e84bf;         color: #FFFFFF;     } </style> <div class="requirement-accepted-hint-templet">     <div id="requirement-accepted-hint-templet-id-name" class="requirement-accepted-hint-templet-class-name" style="position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 2014; background-color: #666666;opacity: 0.3; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=30);     "></div>     <div id="requirement-accepted-hint-templet-content-is-name" class="requirement-accepted-hint-templet-content-class-name">         <div class="requirement-accepted-hint-templet-content-title">             <div class="l">                 <span id="">溫馨提示</span>             </div>             <div class="r">                 <input class="requirement-accepted-hint-templet-cancel-button requirement-accepted-hint-templet-content-cancel-button" type="button" value="×" title="關閉"/>             </div>         </div>         <hr class="devider" style="border-top: 1px solid #f0f0f0; margin: 1px 0 1px 0;"/>         <div class="requirement-accepted-hint-templet-content-text">         </div>         <hr class="devider" style="border-top: 1px solid #f0f0f0; margin: 1px 0 1px 0;"/>         <div class="requirement-accepted-hint-templet-foot">             <div class="requirement-accepted-hint-templet-foot-button requirement-accepted-hint-templet-foot-submit r">                 <input id="requirement-accepted-hint-templet-foot-submit-button" class="" type="button" value="确定"/>             </div>             <div class="requirement-accepted-hint-templet-foot-button requirement-accepted-hint-templet-foot-cancel r">                 <input class="requirement-accepted-hint-templet-cancel-button requirement-accepted-hint-templet-foot-cancel-button" type="button" value="取消"/>             </div>         </div>     </div> </div> <script type="text/javascript"> </script>

效果圖:       

添加div彈框 + 遮罩