一元捐前端页面弹窗框样式调整

donate-service/src/main/resources/templates/index.ftl

@@ -412,16 +412,12 @@
         /*我要捐款弹出窗*/
         .pop{
             margin: 0 auto;
-            width: 510px;
-            height: 410px;
+            width: 480px;
+            /*height: 330px;*/
             text-align: center;
+            border: 1px solid #e1e1e1;
             display: none;
         }
-
-        .pop .modal-dialog .modal-content{
-            width: 510px;
-            height: 410px;
-        }
         .pop .header{
             padding: 0 20px;
             width: 100%;
@@ -520,8 +516,8 @@
         }
         .pop .body .choose .pay .item{
             float: left;
-            margin-right: 10px;
-            width: 110px;
+            margin-right: 16px;
+            width: 100px;
             height: 34px;
             line-height: 34px;
             text-align: center;
@@ -560,13 +556,46 @@
         .pop .body button:hover{
             background: #be3b1b;
         }
-        .modal-open .modal {
+
+        #hover-background .x-floating-wrap {
+            position: fixed;
+            z-index: 99998;
+            background: #000;
+            top: 0;
+            left: 0;
             width: 100%;
             height: 100%;
+            opacity: 0.3;
         }
-        .modal-open .modal .modal-dialog{
-            width: 510px;
-            height: 410px;
+        #hover-background{
+            display:table; overflow:hidden; margin-left:50px; _position:relative;  width: 1200px;height: 700px;
+            position: fixed;
+            top: 50%;
+            margin-top: -300px;
+            left: 50%;
+            margin-left: -600px;
+            z-index: 2000;
+        }
+        #hover-background .x-floating{
+            vertical-align:middle !important;
+            display:table-cell;
+            text-align:center;
+            _position:absolute;
+            _top:50%; _left:50%;
+            top: inherit !important;
+            left: inherit !important;
+        }
+        #hover-background .x-floating .modal{
+            margin: auto auto;
+            max-width: 970px !important;
+            max-height: 600px !important;
+            -webkit-user-select: none;
+            -moz-user-select: none;
+            -ms-user-select: none;
+            user-select: none;
+        }
+        #hover-background .x-floating-wrap{
+            z-index: 1000000 !important;
         }
         /*切换*/
         .buttons{
@@ -702,47 +731,51 @@
 <#--                <input type="button" onclick="donate()" class="fr donation">-->
                 <!--弹出窗-->
                 <div class="pop">
-                    <div class="modal-dialog">
-                        <div class="modal-content">
-                            <div class="header modal-header clearfix">
-                                <p class="fl">${project.name!''}</p>
-                                <p>${project.id!''}</p>
-                                <div class="close fr" data-dismiss="modal">&times;</div>
+                    <div class="header clearfix">
+                        <p class="fl">${project.name!''}</p>
+                        <#--<p>${project.id!''}</p>-->
+                        <div class="close fr" data-dismiss="modal">&times;</div>
+                    </div>
+                    <div class="body">
+                        <div class="choose clearfix">
+                            <span class="fl">捐款金额：</span>
+                            <div class="fl">
+                                <ul>
+                                    <li class="active">1元</li>
+                                    <li>50元</li>
+                                    <li>100元</li>
+                                    <li>200元</li>
+                                </ul>
+                                <div class="write"><input type="text" placeholder="其他金额" class="form-control"/><em>元</em></div>
                             </div>
-                            <div class="body modal-body">
-                                <div class="choose clearfix">
-                                    <span class="fl">捐款金额：</span>
-                                    <div class="fl">
-                                        <ul>
-                                            <li class="active">1元</li>
-                                            <li>50元</li>
-                                            <li>100元</li>
-                                            <li>200元</li>
-                                        </ul>
-                                        <div class="write"><input type="text" placeholder="其他金额" class="form-control"/><em>元</em></div>
-                                    </div>
-                                </div>
-                                <div class="choose clearfix">
-                                    <span class="fl">支付方式：</span>
-                                    <div class="fl pay">
-                                        <div class="item active"><a href=""><img src="static/images/zfb.png" alt=""/>支付宝</a></div>
-                                        <div class="item"><a href=""><img src="static/images/wx.png" alt=""/>微信支付</a></div>
-                                        <div class="item"><a href=""><img src="static/images/bank.png" alt=""/>网银支付</a></div>
-                                    </div>
-                                </div>
-                                <div class="choose clearfix">
-                                    <span class="fl best">我的祝福：</span>
-                                    <textarea name="" id="" cols="30" rows="10" class="fl form-control"></textarea>
-                                    <div class="fl agree clearfix">
-                                        <input type="checkbox" class="fl"><span class="fl"><a href="">同意并接受《优软一元捐用户协议》</a></span>
-                                    </div>
-                                </div>
-                                <a href="donationsOver"> <button>确认捐款</button></a>
+                        </div>
+                        <div class="choose clearfix">
+                            <span class="fl">支付方式：</span>
+                            <div class="fl pay">
+                                <div class="item active"><a href=""><img src="static/images/zfb.png" alt=""/>支付宝</a></div>
+                                <div class="item"><a href=""><img src="static/images/wx.png" alt=""/>微信支付</a></div>
+                                <div class="item"><a href=""><img src="static/images/bank.png" alt=""/>网银支付</a></div>
+                            </div>
+                        </div>
+                        <div class="choose clearfix">
+                            <span class="fl best">我的祝福：</span>
+                            <textarea name="" id="" cols="30" rows="10" class="fl form-control"></textarea>
+                            <div class="fl agree clearfix">
+                                <input type="checkbox" class="fl"><span class="fl"><a href="">同意并接受《优软一元捐用户协议》</a></span>
                             </div>
                         </div>
+                        <a href="donationsOver"> <button>确认捐款</button></a>
+                    </div>
+                </div>
+                <div id="hover-background" style="display: none">
+                    <div class="x-floating-wrap"></div>
+                    <div class="x-floating">
+                        <div id="item-content">
+                            <div class="x-close-wrap"><a href="javascript:void(0);">&times;</a></div>
+                            <div class="modal"></div>
+                        </div>
                     </div>
                 </div>
-            </div>
             </#list>
             </#if>
            <#-- 分页按钮-->