BootStrap modal实现拖拽功能

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

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

<link href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.js"></script>
<script src="https://cdn.bootcss.com/jqueryui/1.11.4/jquery-ui.js"></script> // 完成拖拽功能
<script src="https://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="https://cdn.bootcss.com/jquery/2.1.4/jquery.js"></script>
 <script src="https://cdn.bootcss.com/jqueryui/1.11.4/jquery-ui.js"></script>
 <script src="https://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插件使用详细请看：链接地址

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Bootstrap模态框水平垂直居中与增加拖拽功能

    Bootstrap模态框水平垂直居中与增加拖拽功能

    最近开发一个CMS系统使用上了Bootstrap,在开发一个添加某些选项时,打算弹出一个模态框,但是发现,模态框不会垂直居中到屏幕上,而是在屏幕上方,找了好多资料都没搞定,最终自己试出了一种JS的方法,同时还需要Bootstrap模态框可以拖动,但是发现默认的也不行,翻遍了网络找了出来.现在分享给大家: 原文地址:http://www.panshy.com/articles/201509/webdev-2524.html 以下为Bootstrap模态框拖拽功能的增加方法 $("#myModal&

  • bootstrap模态框实现拖拽效果

    bootstrap模态框实现拖拽效果

    本文实例为大家分享了bootstrap模态框实现拖拽效果,供大家参考,具体内容如下 项目中用的有点乱,jquery和angularjs一起搞,有些插件用的jquery版本的,有的插件用的ng版本的.搞到现在测试了一轮又一轮,发现modal模态框有限bug,因为层级的问题,modal框会被左侧菜单遮挡,需求就改成将modal框改成可以拖动的. 网上搜了搜,找到个blog发现基本功能是可用的.但是效果不太友好.问题有以下两个 拖动时候背后文字会被选中,很难看 modal模态框会被拖出边框以外,很难看

  • JS组件Bootstrap Table表格行拖拽效果实现代码

    JS组件Bootstrap Table表格行拖拽效果实现代码

    一.业务需求及实现效果 项目涉及到订单模块,那天突然接到一个需求,说是两种不同状态的订单之间要实现插单的效果,页面上呈现方式是:左右两个Table,左边Table里面是状态为1的订单,右边Table里面是状态为2订单,左边Table里面的行数据拖动到右边Table里面指定行的位置,拖动完成后,左边表格减少一行,右边表格增加一行.除此之外,还需要撤销操作(相当于Ctrl + Z操作),能够返回到上一步的状态.可能描述会让大家模拟两可,反正已经实现了,先来看看效果图吧. 1.先看看拖动之前的效果 2

  • 详解为Bootstrap Modal添加拖拽的方法

    网上有许多给Bootstrap Modal添加拖拽实现,但是许多代码看起来都比较复杂感觉封装性可能也不太好,有的甚至使用了jquery ui的拖拽功能,这些都不是我想要的,其实我在给Bootstrap Modal添加拖拽功能的事情已经是2017年春节的时候了,弹指一挥间一年就过去了.2017年春节的时候,由于之前项目有同事使用layer来做前端,但是对于我这种略懂js前端的后端开发来说,让我引入layer和layui的一整套东西是艰难的,曾经大致的浏览过layui的一些组件,发现组件功能不是很完

  • 基于bootstrap的上传插件fileinput实现ajax异步上传功能(支持多文件上传预览拖拽)

    基于bootstrap的上传插件fileinput实现ajax异步上传功能(支持多文件上传预览拖拽)

    首先需要导入一些js和css文件 <link href="__PUBLIC__/CSS/bootstrap.css" rel="external nofollow" rel="stylesheet"> <link type="text/css" rel="stylesheet" href="__PUBLIC__/CSS/fileinput.css" rel="

  • .net core版 文件上传/ 支持批量上传拖拽及预览功能(bootstrap fileinput上传文件)

    .net core版 文件上传/ 支持批量上传拖拽及预览功能(bootstrap fileinput上传文件)

    上篇文章给大家介绍了MVC文件上传支持批量上传拖拽及预览文件内容校验功能 本篇内容主要解决.net core中文件上传的问题  开发环境:ubuntu+vscode 1.导入所需要的包:nuget install bootstrap-fileinput 注意:这里的导包需要在终端导入[需要在wwwroot文件夹下执行nuget命令]如下图 如果发现没有nuget命令,则需要通过apt-get 或者yum 给系统安装nuge包管理工具,这个nuget和vscode中的插件不是一回事 2前台页面编写

  • JS组件Bootstrap Table表格多行拖拽效果实现代码

    JS组件Bootstrap Table表格多行拖拽效果实现代码

    前言:前天刚写了篇JS组件Bootstrap Table表格行拖拽效果,今天接到新的需要,需要在之前表格行拖拽的基础上能够同时拖拽选中的多行.用了半天时间研究了下,效果是出来了,但是感觉不尽如人意.先把它分享出来,以后想到更好的办法再优化吧. 一.效果展示 1.拖动前 2.拖动中 3.拖动后 4.撤销回到拖动前状态 二.需求分析 通过上篇我们知道,如果要实现拖拽,必须要有一个可以拖拽的标签,或者叫容器,比如上篇里面的tr就是一个拖拽的容器,那么如果要实现选择行的拖拽,那么博主的第一反应是将选中的

  • BootStrap table实现表格行拖拽效果

    本文实例为大家分享了BootStrap table实现表格行拖拽的具体代码,供大家参考,具体内容如下 不上图了 首先还是得添加三个文件,自己上网搜搜就行 <script src="~/Content/bootstrap-table/jquery.tablednd.js"></script> <script src="~/Content/bootstrap-table/bootstrap-table-reorder-rows.js">

  • BootStrap modal实现拖拽功能

    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"></scr

  • JS基于面向对象实现的拖拽功能示例

    本文实例讲述了JS基于面向对象实现的拖拽功能.分享给大家供大家参考,具体如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style> #div1 {width:100px; height:100px; background:red; position:absolute;} #div2 {width:100px; height:100px; background:yellow; posit

  • java swing中实现拖拽功能示例

    java swing中实现拖拽功能示例

    java实现拖拽示例 Swing中实现拖拽功能,代码很简单,都有注释,自己看,运行效果如下图: 复制代码 代码如下: package com; import java.awt.*;import java.awt.datatransfer.DataFlavor;import java.awt.dnd.DnDConstants;import java.awt.dnd.DropTarget;import java.awt.dnd.DropTargetAdapter;import java.awt.dn

  • Swift下使用UICollectionView 实现长按拖拽功能

    Swift下使用UICollectionView 实现长按拖拽功能

    导读 简单用Swift写了一个collectionview的拖拽点击排序效果; 拖拽排序是新闻类的App可以说是必有的交互设计,如今日头条,网易新闻等. GitHub地址:https://github.com/wangliujiayou/Swift-dragLabel 欢迎Star. 效果 主要代码 手势长按移动 1.给CollectionViewCell添加一个长按手势. private lazy var collectionView: UICollectionView = { let clv

  • 原生js实现弹出层登录拖拽功能

    在WEB开发过程中,总会遇到一些从未接触过的需求,总是想尽一切办法去研究,最终实现效果,在实现效果的那一刻成就感爆棚,有木有? 留言墙.弹出框等一些常见地方都有拖拽功能,方便用户体验嘛. 实现拖拽功能 ,三个事件 mousemove , mouseup ,mousedown, 偏移量(offsetLeft, offsetTop , offsetWidth ,offsetHeight),窗口坐标位置(clientX ,clientY ) 以及获取可视区域方法的兼容性处理. 之前做的比较多的留言墙效

  • 基于JavaScript实现右键菜单和拖拽功能

    下面先给大家介绍下js实现的右键菜单功能,具体详情如下所示: 这一章解决的问题 1.实现右键菜单功能代码. 2.阻止默认事件的实际应用. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>右键菜单</title> <style type="text/css"> #menu {

  • Android中RecyclerView实现滑动删除与拖拽功能

    Android中RecyclerView实现滑动删除与拖拽功能

    前言 从Android 5.0开始,谷歌推出了新的控件RecyclerView,相对于早它之前的ListView,优点多多,功能强大,也给我们的开发着提供了极大的便利,今天自己学习一下RecyclerView轻松实现滑动删除及拖拽的效果. 如下图. 相信研究过RecyclerView的同学,应该很清楚该怎么实现这样的效果,若是用ListView,这样的效果实现起来可能就有点麻烦,但是在强大的RecyclerView面前这样的的效果只需很少的代码,因为谷歌给我们提供了强大的工具类ItemTouch

  • vue2.0使用Sortable.js实现的拖拽功能示例

    vue2.0使用Sortable.js实现的拖拽功能示例

    简介 在使用vue1.x之前的版本的时候,页面中的拖拽功能,我在项目中是直接用的jquery ui中的sortable.js,只是在拖拽完成后,在update的回调函数中又重新排序了存放数据的数组.但是当把vue升级到2.0以上后发现拖拽功能失效了,于是使用了下面代码. 该案例主要是在用于vuejs2.0中实现的拖拽功能,用到的的js有Sortable.js,vuedraggable.js,当然还有vue.min.js,提供的案例使用的require.js加载. 实现效果 实现后的效果如图所示:

随机推荐