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 相关文章推荐
jQuery多项选项卡的实现思路附样式及代码
Jun 03 Javascript
修改或扩展jQuery原生方法的代码实例
Jan 13 Javascript
jQuery实现列表内容的动态载入特效
Aug 08 Javascript
js计算文本框输入的字符数
Oct 23 Javascript
全面理解JavaScript中的闭包
May 12 Javascript
node.js 动态执行脚本
Jun 02 Javascript
原生js仿浏览器滚动条效果
Mar 02 Javascript
浅谈原生JS实现jQuery的animate()动画示例
Mar 08 Javascript
简单实现jQuery上传图片显示预览功能
Jun 29 jQuery
小程序云函数调用API接口的方法
May 17 Javascript
javascript实现日历效果
Jun 17 Javascript
正则表达式基础与常用验证表达式
Jun 16 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
《雄兵连》系列首部大电影《烈阳天道》:可能是因为期望值太高了
2020/08/18 国漫
PHP处理excel cvs表格的方法实例介绍
2013/05/13 PHP
深入php多态的实现详解
2013/06/09 PHP
基于jquery的表头固定的若干方法
2011/01/27 Javascript
javascript图像处理—仿射变换深度理解
2013/01/16 Javascript
javascript-表格排序(降序/反序)实现介绍(附图)
2013/05/30 Javascript
node.js中的http.response.getHeader方法使用说明
2014/12/14 Javascript
全面解析JavaScript里的循环方法之forEach,for-in,for-of
2020/04/20 Javascript
Jquery获取当前城市的天气信息
2016/08/05 Javascript
浅谈javascript中执行环境(作用域)与作用域链
2016/12/08 Javascript
Bootstrap导航条学习使用(一)
2017/02/08 Javascript
js实现PC端根据IP定位当前城市地理位置
2017/02/22 Javascript
vue中component组件的props使用详解
2017/09/04 Javascript
原生JS实现自定义下拉单选选择框功能
2018/10/12 Javascript
vue使用Proxy实现双向绑定的方法示例
2019/03/20 Javascript
vuex中store存储store.commit和store.dispatch的用法
2020/07/24 Javascript
详解Java中String JSONObject JSONArray List转换
2020/11/13 Javascript
[03:48]大碗DOTA
2019/07/25 DOTA
Python正则表达式教程之三:贪婪/非贪婪特性
2017/03/02 Python
django从请求到响应的过程深入讲解
2018/08/01 Python
利用python3 的pygame模块实现塔防游戏
2019/12/30 Python
python ftplib模块使用代码实例
2019/12/31 Python
Python基于pandas爬取网页表格数据
2020/05/11 Python
Python2.x与3​​.x版本有哪些区别
2020/07/09 Python
PyQt5多线程防卡死和多窗口用法的实现
2020/09/15 Python
css3给背景图片加颜色遮罩的方法
2019/11/05 HTML / CSS
英国手机零售商:Carphone Warehouse
2018/06/06 全球购物
吉列剃须刀美国官网:Gillette美国
2018/07/13 全球购物
How TDD works
2012/09/30 面试题
人力资源管理毕业生自荐信
2013/11/21 职场文书
英语专业毕业生自荐信范文
2013/12/31 职场文书
校长就职演讲稿
2014/01/06 职场文书
模范教师材料大全
2014/12/16 职场文书
小学语文继续教育研修日志
2015/11/13 职场文书
学校体育节班级口号
2015/12/25 职场文书
你会写报告?产品体验报告到底该怎么写?
2019/08/14 职场文书