前台模板样式修改

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

@@ -415,7 +415,9 @@
             width: 510px;
             height: 410px;
             text-align: center;
+            display: none;
         }
+
         .pop .modal-dialog .modal-content{
             width: 510px;
             height: 410px;
@@ -694,9 +696,52 @@
                 <div class="project-progress fr">
                     <div><span>项目状态：<em>${project.overdue!''}</em></span></div>
                     <div><span>已参与：<em>${project.joinAmount!'0'}</em>人</span></div>
-                    <div><span>已筹款：<em>${project.totalAmount!'0'}</em>元<#if project.target?exists><#if project.totalAmount?exists>(${project.totalAmount/project.target*100!''}%)</#if></#if>></span></div>
+                    <div><span>已筹款：<em>${project.totalAmount!'0'}</em>元<#if project.target?exists><#if project.totalAmount?exists>(${project.totalAmount/project.target*100!''}%)</#if></#if></span></div>
+                </div>
+                <a class="fr donation"  onclick="donate(this)">我要捐款</a>
+<#--                <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>
+                            <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>
+                    </div>
                 </div>
-                <a class="fr donation" data-toggle="modal" data-target="#layer">我要捐款</a>
             </div>
             </#list>
             </#if>
@@ -705,48 +750,12 @@
         </div>
     </div>
 </div>
-<!--弹出窗-->
-<div class="pop modal" role='dialog' id='layer'>
-    <div class="modal-dialog">
-        <div class="modal-content">
-            <div class="header modal-header clearfix">
-                <p class="fl">捐款项目：寒门学子 阳光助学</p>
-                <div class="close fr" data-dismiss="modal">&times;</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>
-    </div>
-</div>
+
 <script>
+    function donate(e){
+        $('.pop').css('display','none');
+        $(e).siblings(".pop").css('display','block');
+    }
     //    banner
     $('#myCarousel').carousel({
         interval: 5000