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

最新推荐文章于 2023-06-07 15:11:21 发布
最新推荐文章于 2023-06-07 15:11:21 发布
阅读量2w 收藏 5
点赞数 2
分类专栏： Web 文章标签： bootstrap 模态对话框 拖拽
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hnllc2012/article/details/50607884
版权 
请自行下载使用到的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>
一棵随风倒的小小草
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
bootstrap模态框之draggable拖拽移动
02-04 9127
一、方案 引入jquery-ui.min.js，在任意的 DOM 元素上启用 draggable 功能。通过鼠标点击并在视区中拖动来移动 draggable 对象。 参考：http://www.runoob.com/jqueryui/example-draggable.html 二、代码  bootstrapModal.html
bootstrap 可以拖动 表格宽度_table表格列宽可拖动
weixin_39875028的博客
02-15 744
table编号姓名性别生日民族001test0011989-03-06汉//用来存储当前更改宽度的Table Cell,避免快速移动鼠标的问题var tTD;var table = document.getElementById("tableWidth");for (j = 0; j < table.rows[0].cells.length; j++) {table.rows[0].cell...
Bootstrap模态对话框的简单使用
09-02
主要为大家详细介绍了Bootstrap模态对话框的简单使用，感兴趣的小伙伴们可以参考一下
登录页面 输入框左侧加图标 炫酷透明效果 bootstrap css fontawesome联合打造
zl_1987的专栏
11-09 1万+
先上图吧，应该有不少人喜欢这种效果的~~ 知识点：1.bootstrap 输入框组 实现输入框左侧加图标的功能                2.border属性                 3.opacity属性 上代码：(第一次使用代码片) .input-group{ border:1px #ccc solid; border-spacing:1px;
【转】bootbox自定义dialog、confirm、alert样式，以及基本设置方法setDefaults中可用参数...
weixin_30689307的博客
11-17 124
<html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="X-UA-Compatible" content="IE=ed...
bootstrap中模态框的使用，实现酷炫的弹出效果，可以实现form表单，提示框等等
qq_36873646的博客
06-05 7692
前言：这是我的第四篇垃圾博文，前三篇目前看来只有13次浏览量，我自己看的好像就占了一大半，不过还是要不要脸的写下去；正文：问题：我们作为后台开发人员，经常会做一些表单提交，最常见的是对数据库的的增删改查，大部分同学做修改的增加的时候都会选择重新跳转到一个新的页面，这样既不简洁又不高大上，bootstrap模态框完美的解决掉这个问题；第一步，引入bootstrap的cs和js第二步，实例展示：&lt...
可拖拽的bootstrap弹出窗口
07-20
可拖拽的bootstrap弹出窗口结合jquery-ui实现的弹出和拖拽效果。
bootstrapTable-modal模态框 可拖动设置
unkul的专栏
12-06 1685
工作上遇到客户要去模态框可拖动，今天整理了一些 <div class="modal fade bs-example-modal-lg" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class=" modal-dialog modal-lg" role="document"> <div class="modal-content">
模态框以及大小和位置
qq_32993549的博客
03-29 7517
1.  描述模态框Bootstrap Modals（模态框）是使用定制的 Jquery 插件创建的。它可以用来创建模态窗口丰富用户体验，或者为用户添加实用功能。您可以在 Modals（模态框）中使用 Popover（弹出框）和 Tooltip（工具提示插件）。在本教程中，将通过一些实例和解释来讨论如何使用 Bootstrap 创建模态窗口。同时，我们也会讨论用于定制的各种可用选项。2.需要的文件您...
Bootstrap 模态对话框只加载一次 remote 数据的完美解决办法
08-30
前端框架 Bootstrap 的模态对话框，可以使用 remote 选项指定一个 URL，这样对话框在第一次弹出的时候就会自动从这个地址加载数据到 .modal-body 中，但是它只会加载一次，不过通过在事件中调用 removeData() 方法...
bootstrap可拖拽弹出层
09-28
自己基于jQuery封装可拖拽非模态弹出层，采用bootstrap风格，可扩展。 通过$.noModel({/**这里放着各个参数*/}); 具体调用方法在commonality.js中
Bootstrap模态对话框中显示动态内容的方法
12-11
首先引入bootstrap的js和css，在引入对应版本的jquery； 添加按钮，点击弹出模态...创建模态对话框： <div class="model fade" id="modal" tabindex="-1" role="dialog" aria_labelledby="myModelLabel" aria-hidde
Bootstrap模态对话框用法简单示例
10-18
主要介绍了Bootstrap模态对话框用法,结合实例形式分析了Bootstrap模态对话框的简单创建与使用操作技巧,需要的朋友可以参考下
bootstrap 模态框实现拖动，移除模态框灰色背景和同个页面多次弹出模态框实现
Sunny__wei的博客
10-14 398
内容如标题,不多说 直接上实现代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 实例 - 模态框（Modal）插件</title> <-- 模态框拖拽插件 --> <link rel="styleshee...
设置bootstrap modal模态框的宽度和宽度
热门推荐
zsg88的专栏
04-28 9万+
(1)修改修改modal中的modal-dialog这个div宽度
bootstrap模态框中textarea大小调整
围巾的ACM博客
06-12 2万+
在使用bootstrap模态框时表单元素中有textarea，但是无法使用网上说的cols和rows来控制这个模态框的大小，这个时候需要使用 &lt;textarea class="form-control" id="deblock_udid" name="deblock_udid" rows="16" style="min-width: 90%"&gt;&lt;/textarea&a
jquery实现BootStrap的弹出框拖动，及鼠标滚轮改变BootStrap的弹出框大小
万里飞鹏的博客
05-15 878
jquery-ui实现bootstrap的modal拖拽功能：https://blog.csdn.net/tangdou5682/article/details/78075935 鼠标滚轮改变BootStrap的弹出框大小 加了滚动监听事件，每次改变弹出框大小 var scrollFunc=function(e){ e=e || window.event; va...
bootstrap-dialog弹框，去掉遮盖层，可移动
lxyforever5的博客
06-07 1301
2.可移动的处理，查找了一些资料，针对bootstrap-dialog弹框的可移动处理，最直接的是引用jquery-ui相关js.css文件，在引用的时候需要注意jquery-ui的内容有的控件可能会与bootstrap-控件存在冲突，所以引用的时候引用js，不要引用min.js，同时引用放在bootstrap-控件引用的前面。$(弹框的id).draggable();弹框的页面的任何位置都可以操作移动。里面会有勾选，能全选的就全选，如果全选中引用后存在冲突，可以重新下载排除掉冲突的控件处理。
使用Bootstrap模态框实现增删改查功能
最新发布
06-10
使用Bootstrap模态框实现增删改查功能一般需要以下步骤： 1. 创建一个Bootstrap模态框，用于添加、编辑或删除数据。 2. 在模态框中添加表单元素，用于输入或展示数据。 3. 使用AJAX技术发送请求到后台，执行对数据库的增加、修改或删除操作。 4. 在前端页面中实现查找功能，使用AJAX技术发送请求到后台，获取数据并展示在页面上。 具体实现步骤如下： 1. 创建一个Bootstrap模态框，可以使用Bootstrap提供的样式和JavaScript代码。例如： ``` <div id="myModal" class="modal fade" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">添加/编辑数据</h4> </div> <div class="modal-body"> <!-- 在这里添加表单元素 --> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> <button type="button" class="btn btn-primary" id="saveBtn">保存</button> </div> </div> </div> </div> ``` 2. 在模态框中添加表单元素，例如： ``` <form role="form"> <div class="form-group"> <label for="name">姓名：</label> <input type="text" class="form-control" id="name" name="name"> </div> <div class="form-group"> <label for="age">年龄：</label> <input type="number" class="form-control" id="age" name="age"> </div> <!-- 在这里添加其他表单元素 --> </form> ``` 3. 使用AJAX技术发送请求到后台，例如： ``` // 添加数据 $("#addBtn").click(function() { $("#myModal").modal("show"); $("#saveBtn").off("click").on("click", function() { var name = $("#name").val(); var age = $("#age").val(); // 发送POST请求到后台 $.ajax({ type: "POST", url: "/add", data: {name: name, age: age}, success: function(data) { // 添加成功后，刷新页面或重新请求数据并展示在页面上 }, error: function() { // 处理错误情况 } }); }); }); // 编辑数据 $("#editBtn").click(function() { // 获取要编辑的数据并展示在模态框中 $("#myModal").modal("show"); $("#saveBtn").off("click").on("click", function() { var name = $("#name").val(); var age = $("#age").val(); // 发送POST请求到后台 $.ajax({ type: "POST", url: "/edit", data: {name: name, age: age}, success: function(data) { // 编辑成功后，刷新页面或重新请求数据并展示在页面上 }, error: function() { // 处理错误情况 } }); }); }); // 删除数据 $("#deleteBtn").click(function() { // 获取要删除的数据的ID // 发送POST请求到后台 $.ajax({ type: "POST", url: "/delete", data: {id: id}, success: function(data) { // 删除成功后，刷新页面或重新请求数据并展示在页面上 }, error: function() { // 处理错误情况 } }); }); ``` 4. 在前端页面中实现查找功能，例如： ``` // 查找数据 $("#searchBtn").click(function() { var keyword = $("#keyword").val(); // 发送GET请求到后台获取数据 $.ajax({ type: "GET", url: "/search", data: {keyword: keyword}, success: function(data) { // 将返回的数据展示在页面上 }, error: function() { // 处理错误情况 } }); }); ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值