基于jquery-ui及bootstrap的可拖拽模态框
2024-08-26 00:00:06
可直接使用代码
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>model</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<!-- 完成拖拽功能 -->
<script src="//cdn.bootcss.com/jqueryui/1.11.4/jquery-ui.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head> <body>
<div class="container-fluid">
<center>
<h1>可拖拽的模态框</h1>
<button class="btn btn-primary" id="click">
<i class="glyphicon glyphicon-floppy-disk"></i> click
</button>
</center>
<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"></h4>
</div>
<div class="modal-body"> <div class="form-group">
<label for="txt_departmentname">部门名称</label>
<input type="text" name="txt_departmentname" class="form-control" id="txt_departmentname" placeholder="部门名称">
</div>
<div class="form-group">
<label for="txt_parentdepartment">上级部门</label>
<input type="text" name="txt_parentdepartment" class="form-control" id="txt_parentdepartment" placeholder="上级部门">
</div>
<div class="form-group">
<label for="txt_departmentlevel">部门级别</label>
<input type="text" name="txt_departmentlevel" class="form-control" id="txt_departmentlevel" placeholder="部门级别">
</div>
<div class="form-group">
<label for="txt_statu">描述</label>
<input type="text" name="txt_statu" class="form-control" id="txt_statu" placeholder="状态">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal"><i class="glyphicon glyphicon-remove" aria-hidden="true"></i> 关闭</button>
<button type="button" id="btn_submit" class="btn btn-primary" data-dismiss="modal"><i class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></i> 保存</button>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
//注册新增按钮的事件
$("#click").click(function() {
$("#myModalLabel").text("新增");
$('#myModal').modal();
});
// 无按钮时自动加载
//$('#myModal').modal(); // 在模态框出现后添加可拖拽功能
$(document).on("show.bs.modal", ".modal", function() {
$(this).draggable({
handle: ".modal-header", // 只能点击头部拖动
cursor: "crosshair"
});
$(this).css("overflow", "hidden"); // 防止出现滚动条，出现的话，你会把滚动条一起拖着走的
});
</script>
</body> </html>
可拖拽模态框，不能控制拖拽范围，使用 containment:"window" 之后连拖拽都不行了，有知道的小伙伴烦请告知一下，谢谢！
最新文章
- Emacs学习心得之 LaTeX编辑
- oracle vm virtualbox右ctrl切换显示模式
- RPG的错排
- 你可以使用 play framework 做5件很爽的事情http://www.anool.net/?p=629
- XibDemo
- 图片裁切插件jCrop的使用心得（三）
- c++封装性
- 浅析JavaScript的字符串查找函数：indexOf和search
- mysql创建新用户及新用户不能本地登陆的问题
- MySQL 笔记整理（16） --“order by”是怎么工作的？
- 3-1.Hadoop单机模式安装
- Kotlin 枚举类
- appium学习记录1
- 解决nginx重启“var/run/nginx/nginx.pid" no such file or directory问题
- dubbo+zookeeper注册服务报错问题：No service registed on zookeeper
- CSS 文本
- mysql high availability 概述
- PLSQL Developer 中文显示乱码的解决方法
- Java 并行编程！
- Clipboard.GetImage() Clipboard获取粘贴板内容为null的解决办法