为Bootstrap模态对话框添加拖拽移动功能

来源：互联网发布：linux 安装magento2 编辑：程序博客网时间：2024/05/14 05:48
请自行下载使用到的Bootstrap库及jQuery库<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <link href="bootstrap.min.css" media="screen" rel="stylesheet"></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><script src="jquery-1.11.2.min.js"></script><script src="jquery-ui.min.js"></script><!--用户拖动元素，链接：http://api.jqueryui.com/draggable/#method-disable/--><script src="jquery.ui.touch-punch.min.js"></script><!--移动设备用户拖动元素，依赖juery-ui.min.js，链接：http://touchpunch.furf.com/--><script src="bootstrap.min.js"></script><script>    $(document).ready(function(){        $("#modalDialog").draggable();//为模态对话框添加拖拽        $("#myModal").css("overflow", "hidden");//禁止模态对话框的半透明背景滚动    })</script></body></html>
0 0