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 相关文章推荐
js不是基础的基础
Dec 24 Javascript
jQuery布局插件UI Layout简介及使用方法
Apr 03 Javascript
jquery自动切换tabs选项卡的具体实现
Dec 24 Javascript
jquery JSON的解析方式示例介绍
Jul 27 Javascript
JS中使用变量保存arguments对象的方法
Jun 03 Javascript
详解vue.js的devtools安装
May 26 Javascript
利用jquery去掉时光轴头尾部线条的方法实例
Jun 16 jQuery
文本溢出插件jquery.dotdotdot.js使用方法详解
Jun 22 jQuery
Element-UI踩坑之Pagination组件的使用
Oct 29 Javascript
Vue 页面状态保持页面间数据传输的一种方法(推荐)
Nov 01 Javascript
vue 解决computed修改data数据的问题
Nov 06 Javascript
javascript设计模式 ? 享元模式原理与用法实例分析
Apr 15 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
php在线生成ico文件的代码
2007/10/09 PHP
让php处理图片变得简单 基于gb库的图片处理类附实例代码下载
2011/05/17 PHP
php线性表顺序存储实现代码(增删查改)
2012/02/16 PHP
浅析Mysql 数据回滚错误的解决方法
2013/08/05 PHP
PHP弱类型的安全问题详细总结
2016/09/25 PHP
PHP简单读取xml文件的方法示例
2017/04/20 PHP
PHP 文件写入和读取操作实例详解【必看篇】
2019/11/04 PHP
简单的js分页脚本
2009/05/21 Javascript
Javascript在IE或Firefox下获取鼠标位置的代码
2009/12/18 Javascript
DIV外区域Click后关闭DIV的实现代码
2011/12/21 Javascript
Prototype源码浅析 String部分(四)之补充
2012/01/16 Javascript
jquery.blockUI.js上传滚动等待效果实现思路及代码
2013/03/18 Javascript
jQuery动态添加、删除元素的方法
2014/01/09 Javascript
牛叉的Jquery——Jquery与DOM对象的互相转换及DOM的三种操作
2015/10/29 Javascript
小白谈谈对JS原型链的理解
2016/05/03 Javascript
JavaScript中ES6字符串扩展方法
2016/08/26 Javascript
纯js和css完成贪吃蛇小游戏demo
2016/09/01 Javascript
Angular和百度地图的结合实例代码
2016/10/19 Javascript
浅谈jQuery this和$(this)的区别及获取$(this)子元素对象的方法
2016/11/29 Javascript
JS常见创建类的方法小结【工厂方式,构造器方式,原型方式,联合方式等】
2017/04/01 Javascript
微信小程序图片横向左右滑动案例
2017/05/19 Javascript
在Vue中使用echarts的实例代码(3种图)
2017/07/10 Javascript
浅谈mint-ui loadmore组件注意的问题
2017/11/08 Javascript
JavaScript数组方法的错误使用例子
2018/09/13 Javascript
[01:12:08]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.24
2019/09/10 DOTA
python Pygame的具体使用讲解
2017/11/03 Python
Pandas:DataFrame对象的基础操作方法
2018/06/07 Python
Python分支语句与循环语句应用实例分析
2019/05/07 Python
canvas简易绘图的实现(海绵宝宝篇)
2018/07/04 HTML / CSS
Stuart Weitzman欧盟:美国奢华鞋履品牌
2017/05/24 全球购物
全球最大运动品牌的男装、女装和童装官方库存商:A&A Sports
2021/01/17 全球购物
会话Bean的种类
2013/11/07 面试题
2015年班级元旦晚会活动总结
2014/11/28 职场文书
HTML5中 rem适配方案与 viewport 适配问题详解
2021/04/27 HTML / CSS
JavaScript中document.activeELement焦点元素介绍
2021/11/27 Javascript
NGINX 权限控制文件预览和下载的实现原理
2022/01/18 Servers