BootStrap modal实现拖拽功能


Posted in Javascript onDecember 01, 2018

bootstrap中有javascript插件modal也就是对话框,加入拖拽功能,具体内容如下

在使用modal时首选需要引用js

<link href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<script src="//cdn.bootcss.com/jquery/2.1.4/jquery.js"></script>
<script src="//cdn.bootcss.com/jqueryui/1.11.4/jquery-ui.js"></script> // 完成拖拽功能
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.js"></script> // 完成Modal

编辑Html代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>BootStrap Modal</title>
 <link href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.css" rel="external nofollow" rel="external nofollow" rel="stylesheet">
 <script src="//cdn.bootcss.com/jquery/2.1.4/jquery.js"></script>
 <script src="//cdn.bootcss.com/jqueryui/1.11.4/jquery-ui.js"></script>
 <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.js"></script>
</head>
<body>
 <button class="btn btn-default">显示Modal</button>
 
 <div class="modal fade">
 <div class="modal-dialog">
 <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">Modal title</h4>
 </div>
 <div class="modal-body">
 <p>One fine body…</p>
 </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>
 <!-- /.modal-content --> 
 </div>
 <!-- /.modal-dialog --> 
 </div>
 <!-- /.modal -->
<script type="text/javascript">
 var $button = $('.btn-default'),
 $modal = $('#myModal');
 $(function(){
 $button.on('click',function(event) {
 event.preventDefault();
 /* Act on the event */
 $modal.show(
 '500',
 function() {
 var modal = $(this);
 modal.find('.modal-title').text('New message to ');
 $.ajax({});
 });
 $modal.modal('show');
 });
 });
 </script>
 
</body>
</html>

要完成拖拽功能需要修改一下javascript

<script type="text/javascript">
 var $button = $('.btn-default'),
 $modal = $('#myModal');
 $(function(){
 $button.on('click',function(event) {
 event.preventDefault();
 /* Act on the event */
 $modal.show(
 '500',
 function() {
 var modal = $(this);
 modal.find('.modal-title').text('New message to ');
 $.ajax({});
 });
 /* 完成拖拽 */
 $modal.draggable({
 cursor: "move",
 handle: '.modal-header'
 });
 $modal.modal('show');
 });
});
</script>

推荐

有关bootstrap modal插件使用详细请看:链接地址

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript(js)设置默认输入焦点(focus)
Dec 28 Javascript
JavaScript中九种常用排序算法
Sep 02 Javascript
JavaScript判断是否为数字的4种方法及效率比较
Apr 01 Javascript
jquery+ajax+text文本框实现智能提示完整实例
Jul 09 Javascript
javascript数组常用方法汇总
Sep 10 Javascript
JavaScript 函数节流详解及方法总结
Feb 09 Javascript
javascript基础知识之html5轮播图实例讲解(44)
Feb 17 Javascript
jQuery插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
Mar 23 jQuery
Angular 通过注入 $location 获取与修改当前页面URL的实例
May 31 Javascript
underscore之function_动力节点Java学院整理
Jul 11 Javascript
基于JavaScript实现弹幕特效
Aug 27 Javascript
vue利用v-for嵌套输出多层对象,分别输出到个表的方法
Sep 07 Javascript
vuejs2.0运用原生js实现简单拖拽元素功能
Aug 21 #Javascript
BootStrap table实现表格行拖拽效果
Dec 01 #Javascript
一次Webpack配置文件的分离实战记录
Nov 30 #Javascript
基于Vue组件化的日期联动选择器功能的实现代码
Nov 30 #Javascript
vue拖拽排序插件vuedraggable使用方法详解
Aug 21 #Javascript
JS实现图片拖拽交换效果
Nov 30 #Javascript
Vue+Webpack完美整合富文本编辑器TinyMce的方法
Nov 30 #Javascript
You might like
ThinkPHP中实例Model方法的区别说明
2010/08/21 PHP
深入探讨:PHP使用数据库永久连接方式操作MySQL的是与非
2013/06/05 PHP
微信公众号开发之文本消息自动回复php代码
2016/08/08 PHP
深入理解Yii2.0乐观锁与悲观锁的原理与使用
2017/07/26 PHP
windows环境下使用Composer安装ThinkPHP5
2018/05/18 PHP
Laravel 修改验证异常的响应格式实例代码详解
2020/05/25 PHP
Sample script that displays all of the users in a given SQL Server DB
2007/06/16 Javascript
javascript 操作select下拉列表框的一点小经验
2010/03/20 Javascript
js实现弹出窗口、页面变成灰色并不可操作的例子分享
2014/05/10 Javascript
jquery判断单选按钮radio是否选中的方法
2015/05/05 Javascript
jquery遍历标签中自定义的属性方法
2016/09/17 Javascript
详解微信小程序 wx.uploadFile 的编码坑
2017/01/23 Javascript
Javascript前端经典的面试题及答案
2017/03/14 Javascript
[52:07]完美世界DOTA2联赛PWL S3 LBZS vs access 第二场 12.10
2020/12/13 DOTA
[47:52]DOTA2-DPC中国联赛正赛 iG vs LBZS BO3 第二场 3月4日
2021/03/11 DOTA
Python中的Numpy入门教程
2014/04/26 Python
Python简单的制作图片验证码实例
2017/05/31 Python
python3调用windows dos命令的例子
2019/08/14 Python
Django框架中间件定义与使用方法案例分析
2019/11/28 Python
Python进阶之迭代器与迭代器切片教程
2020/01/29 Python
CSS3实现复选框动画特效示例代码
2016/09/27 HTML / CSS
英国领先的品牌珠宝和配件供应商:Acotis Jewellery
2018/03/07 全球购物
美国排名第一的葡萄酒俱乐部:Firstleaf Wine Club
2020/01/02 全球购物
建筑工程自我鉴定
2013/10/18 职场文书
专科毕业生自我鉴定
2013/12/01 职场文书
大学生创业计划书的范文
2014/01/07 职场文书
《最大的“书”》教学反思
2014/02/14 职场文书
雷锋式好少年事迹材料
2014/08/17 职场文书
群众路线党员自我评议范文2014
2014/09/24 职场文书
小学一年级学生评语大全
2014/12/25 职场文书
个人年度总结报告
2015/03/09 职场文书
学习与创新自我评价
2015/03/09 职场文书
开会通知短信大全
2015/04/20 职场文书
2015年党支部书记工作总结
2015/05/21 职场文书
孟佩杰观后感
2015/06/17 职场文书
商业计划书之服装
2019/09/09 职场文书