一元捐移动页面捐款完成弹出提示框

donate-service/src/main/webapp/resources/view/mobile/mobile_project_detail.html

@@ -639,7 +639,6 @@
     .donationOver{
         margin: 0 auto;
         top: 50%;
-        margin-top: 1.6rem;
         width: 4.4rem;
         height: 2.3rem;
         text-align: center;
@@ -648,6 +647,7 @@
     .donationOver .header{
         width: 100%;
         height: .66rem;
+        line-height: .66rem;
         text-align: center;
         font-size: .3rem;
         color: #000;
@@ -672,6 +672,31 @@
         font-size: .28rem;
         color: #333333;
     }
+    /*遮罩层*/
+    #image-box{
+        position: fixed;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        z-index: 1050;
+        overflow: hidden;
+        -webkit-overflow-scrolling: touch;
+        outline: 0;
+        background: rgba(0,0,0,.5);
+    }
+    #myModal{
+        display: table;
+        position: fixed;
+        width: 7.5rem;
+        height: 3rem;
+        top: 50%;
+        left: 50%;
+        margin-left: -3.7rem;
+        margin-top: -1.5rem;
+        overflow: hidden;
+        z-index: 5;
+    }
 </style>
 <div class="nav">
     <div class="container">
@@ -1002,20 +1027,22 @@
                 <div class="btn">
                     <button type="button" ng-disabled="donationForm.$invalid || !checked || record.amount == null || record.amount == 0"
                             onclick="pay(angular.element(this).scope().project.id, angular.element(this).scope().record.amount,
-                            angular.element(this).scope().record.way, angular.element(this).scope().imId)" data-target="#myModal" data-toggle="modal">立即捐款</button>
+                            angular.element(this).scope().record.way, angular.element(this).scope().imId)">立即捐款</button>
                 </div>
             </form>
         </div>
-        <!--捐款完成弹出框-->
-        <div id="myModal" class="modal" tabindex="-1" role="dialog" aria-hidden="true">
-            <div class="donationOver"><!--style="display: none"-->
-                <div class="header">
-                   请确认微信支付是否完成？
-                </div>
-                <div class="body">
-                    <div class="pay-list"><a ng-click="queryTradeStatus()" class="finish">已完成支付</a></div>
-                    <div class="pay-list"><a ng-click="payAgain()" class="return">支付遇到问题，重新支付</a></div>
-                </div>
+    </div>
+</div>
+<!--捐款完成弹出框-->
+<div id="image-box">
+    <div id="myModal">
+        <div class="donationOver"><!--style="display: none"-->
+            <div class="header">
+                请确认微信支付是否完成？
+            </div>
+            <div class="body">
+                <div class="pay-list"><a ng-click="queryTradeStatus()" class="finish">已完成支付</a></div>
+                <div class="pay-list"><a ng-click="payAgain()" class="return">支付遇到问题，重新支付</a></div>
             </div>
         </div>
     </div>
@@ -1097,4 +1124,5 @@
     $('.select-way').on('click', function () {
         $(this).addClass('active').siblings().removeClass('active');
     });
+
 </script>