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 相关文章推荐
Mootools 1.2教程 Fx.Morph、Fx选项和Fx事件
Sep 15 Javascript
javascript截取字符串(通过substring实现并支持中英文混合)
Jun 24 Javascript
js中widow.open()方法使用详解
Jul 30 Javascript
Javascript中arguments对象详解
Oct 22 Javascript
jQuery超酷平面式时钟效果代码分享
Mar 30 Javascript
JS实现列表的响应式排版(推荐)
Sep 01 Javascript
jQuery实现的表格展开伸缩效果实例
Sep 07 Javascript
仿iframe效果Aajx文件上传实例
Nov 18 Javascript
Vuejs中使用markdown服务器端渲染的示例
Nov 22 Javascript
vue-scroller记录滚动位置的示例代码
Jan 17 Javascript
vue非父子组件通信问题及解决方法
Jun 11 Javascript
ionic4+angular7+cordova上传图片功能的实例代码
Jun 19 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
如何将一个表单同时提交到两个地方处理
2006/10/09 PHP
PHP 中执行排序与 MySQL 中排序
2009/04/21 PHP
火车采集器 免费版使出收费版本功能实现原理
2009/09/17 PHP
php中字符查找函数strpos、strrchr与strpbrk用法
2014/11/18 PHP
PHP获取网站中各文章的第一张图片的代码示例
2016/05/20 PHP
php实现图片上传时添加文字和图片水印技巧
2020/04/18 PHP
PHP基于正则批量替换Img中src内容实现获取缩略图的功能示例
2017/06/07 PHP
一直复略了的一个问题,关于表单重复提交
2007/02/15 Javascript
js replace 与replaceall实例用法详解
2013/08/03 Javascript
用js将内容复制到剪贴板兼容浏览器
2014/03/18 Javascript
javascript为下拉列表动态添加数据项
2014/05/23 Javascript
Websocket协议详解及简单实例代码
2016/12/12 Javascript
jquery pagination插件动态分页实例(Bootstrap分页)
2016/12/23 Javascript
Vue通过input筛选数据
2020/10/26 Javascript
浅谈vuejs实现数据驱动视图原理
2018/02/23 Javascript
Vuex入门到上手教程
2018/06/20 Javascript
Vue实现导航栏的显示开关控制
2019/11/01 Javascript
Ant Design Pro 之 ProTable使用操作
2020/10/31 Javascript
python遍历 truple list dictionary的几种方法总结
2016/09/11 Python
Python爬虫DNS解析缓存方法实例分析
2017/06/02 Python
关于反爬虫的一些简单总结
2017/12/13 Python
python中metaclass原理与用法详解
2019/06/25 Python
python各类经纬度转换的实例代码
2019/08/08 Python
Django查询优化及ajax编码格式原理解析
2020/03/25 Python
html5图片上传预览示例分享
2014/04/14 HTML / CSS
英国123鲜花网站:123 Flowers
2019/07/07 全球购物
俄罗斯第一家篮球店:StreetBall
2020/07/30 全球购物
介绍一下Cookie和Session及他们之间的区别
2012/11/20 面试题
请问软件开发中的设计模式你会使用哪些
2015/05/13 面试题
公积金转移接收函
2014/01/11 职场文书
办理生育手续介绍信
2014/01/14 职场文书
写好自荐信需做到的5要点
2014/03/07 职场文书
小组口号大全
2014/06/09 职场文书
酒店七夕情人节活动策划方案
2014/08/24 职场文书
保研推荐信格式
2015/03/25 职场文书
Python matplotlib绘制雷达图
2022/04/13 Python