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>
  • 相关阅读:
    Linux学习记录(四):Shell脚本
    Linux学习记录(三):Vim
    基于PyTorch构建神经网络
    Python开发【第一篇】:初识Python
    asyncio 并发编程(二)
    asyncio 并发编程(一)
    Linux 文件和目录操作命令(一)
    Django Model
    Django 之 Form 组件
    Django 模板系统
  • 原文地址:https://www.cnblogs.com/macT/p/10209380.html
Copyright © 2011-2022 走看看