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>
  • 相关阅读:
    saltstack配置详解
    前端html&Css快速入门...
    pymysql实现注册登录
    Mysql学习入门到放弃ing...
    python学习之选课系统项目(面向对象)
    python 面向对象和类
    python开发三层架构
    python 查看某个文件下最新更新的日期文件
    python写小说阅读功能~
    删除链表中重复的结点
  • 原文地址:https://www.cnblogs.com/macT/p/10209380.html
Copyright © 2011-2022 走看看