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>
  • 相关阅读:
    taotao-manager/taotao-manager-interface/pom.xml
    taotao-manager/taotao-manager-pojo/pom.xml
    taotao-manager/pom.xml
    taotao-manager/taotao-manager-dao/pom.xml
    taotao-common/pom.xml
    taotao-parent/pom.xml(父工程的pom.xml文件配置)
    idea社区版使用maven运行web项目
    IntelliJ IDEA Community社区版集成Tomcat教程
    linux中没有tree命令,command not found,解决办法
    数据导入导出
  • 原文地址:https://www.cnblogs.com/macT/p/10209380.html
Copyright © 2011-2022 走看看