您的位置:首页 > Web前端 > HTML

按钮操作DIV的打开与关闭(div悬浮于页面之上)

2017-12-19 15:53 2436 查看
HTML的编写:

<div class="modal_fade" id="repayment_dealresult" style="width:100%;display:none;position:fixed;">

<!-- 隐藏div层可以display="none" ,显示DIV层相应的代码为display="block"-->

   <div class="modal-dialog">

       <div class="modal-content">   

               <div class="modal-header">

                   <h4 class="modal-title" id="myModalLabel">悬浮窗体</h4>

               </div>

                                <!-- html文本内容-->

               <div class="modal-footer">

                           <!-- 给悬浮窗体设置一个关闭按钮并添加触发事件-->

                  <input type="button" value="关闭" onclick="close_deal_result()">

               </div>

       </div>

   </div>

</div> 

 <!-- 设置一个打开悬浮框的按钮-->

<input type="button" id="butoon5"  name="result" value="付款结果" class="btn1" onclick="paymentResult()" /> 
  

js代码:

function  paymentResult(){

     var width = window.innerWidth,

       
997c
                             height = window.innerHeight;

                                    var tdiv = jQuery(".modal_fade");

                                    tdiv.eq(0).css('display', "block");

                                    tdiv.eq(0).css('left', width/2 - tdiv.eq(0).width()/2);

                                    tdiv.eq(0).css('top', height/2 - tdiv.eq(0).height()/2);

                            }

                          function close_deal_result(){

        document.getElementById("repayment_dealresult").style.display="none";

}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  html