为bootstrap模态窗口添加拖拽(draggable )事件
2016-07-06 15:56
603 查看
</pre><pre name="code" class="html"><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link href="bootstrap.min.css" rel="stylesheet"> <title></title> </head> <body> <!--触发事件 --> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Launch demo modal </button> <!-- 模态窗口 --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div 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">×</span></button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> <script src="jquery-1.11.2.min.js" type="text/javascript"></script> <!--用户拖动元素需引入的js--> <script src="jquery-ui.min.js" type="text/javascript"></script> <!--移动设备用户拖动元素需引入的js--> <script src="jquery.ui.touch-punch.min.js" type="text/javascript"></script> <script src="bootstrap.min.js" type="text/javascript"></script> <script> $(document).ready(function(){ //为模态对话框添加拖拽 //$(".modal-dialog").draggable(); //为模态对话框添加拖拽,拖拽区域只在顶部栏 $(".modal-dialog").draggable({ handle: ".modal-header" }); }) </script> </body> </html>
相关文章推荐
- Form表单验证神器: BootstrapValidator
- bootstrap学习笔记-按钮
- bootstrap-table.js如何根据单元格数据不同显示不同的字体的颜色
- Bootstrap选项卡与Masonry插件的完美结合
- 针对BootStrap中tabs控件的美化和完善(推荐)
- 针对BootStrap中tabs控件的美化和完善
- bootstrap栅格系统的div高度怎样定?
- 关于bootstrap--导航栏
- 针对BootStrap中tabs控件的美化和完善(推荐)
- Bootstrap选项卡与Masonry插件的完美结合
- BootstrapTest_2(栅格系统)
- jquery radio设置checked但按钮radio仍然没选中的js处理方式-javascript bootstrap
- BootstrapTest_1(认识Bootstrap)
- bootstrap浮窗
- bootstrape 轮播插件
- bootstrap select 遇到问题
- 分页插件BootstrapPaginator
- 分页插件jBootstrapPage
- SpringMVC实现的文件上传进度条Bootstrap展示
- JQuery组件基于Bootstrap的DropDownList(完整版)