zoukankan      html  css  js  c++  java
  • 为Bootstrap模态对话框添加拖拽移动功能

    <!DOCTYPE html>
    <html>
    <head lang="en">
       <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title></title>
       <link rel="stylesheet" href="css/bootstrap.css" />
      <script type="text/javascript" src="js/jquery-1.8.0.min.js" ></script>
      <script src="http://apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
      <!--<script src="jquery.ui.touch-punch.min.js"></script>--><!--移动设备用户拖动元素,依赖juery-ui.min.js,链接:http://touchpunch.furf.com/-->
      <script src="js/bootstrap.min.js"></script>
       <script>       
            $(document).ready(function () {  
            $("#modalDialog").draggable();//为模态对话框添加拖拽
            $("#myModal").css("overflow", "hidden");//禁止模态对话框的半透明背景滚动
            });        
        </script>
    </head>
    <body>
    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
        打开示例对话框
    </button>
    
    <!-- Modal -->
    <div  class="modal fade"  id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div id="modalDialog" class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">可拖动窗口</h4>
                </div>
                <div class="modal-body">
                   按住左键开始拖动吧
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>
    </body>
    </html>
  • 相关阅读:
    114.完全背包【恰好装满完全背包
    整数划分类型题目
    三目运算符
    关于 xk 的位数。
    多重背包二进制原理拆分问题
    2016.4.2 讲课笔记(动态规划)
    二叉树(2)二叉树创建的3种方法,二叉树的递归遍历,二叉树的销毁
    二叉树(1)已知某2种排序方式,创建这个二叉树并按第3种方式排序
    C++知识点总结(二)
    5款优秀的开源克隆软件
  • 原文地址:https://www.cnblogs.com/macT/p/10209380.html
Copyright © 2011-2022 走看看