BootStrap modal实现拖拽功能
作者：请大声叫我帅哥 时间：2024-04-18 09:43:48
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插件使用详细请看：链接地址
来源：https://blog.csdn.net/xiaoreqing/article/details/51610906
标签：bootStrap,modal,拖拽
0
投稿猜你喜欢
Python爬虫实例——scrapy框架爬取拉勾网招聘信息
2023-01-20 19:06:45
JavaScript学习笔记之函数记忆
2024-04-16 09:27:01
asp GetString的用法
2008-06-12 13:46:00
PyTorch中的C++扩展实现
2021-06-24 15:52:30
python Pygame的具体使用讲解
2021-01-15 21:41:26
PHP实现从上往下打印二叉树的方法
2023-06-25 17:40:08
Python文本处理简单易懂方法解析
2021-08-09 02:45:16
python3 读取Excel表格中的数据
2021-01-14 23:03:42
python新手练习实例之万年历
2021-01-29 02:20:35
SQL Server 2008数据挖掘查询任务
2009-03-16 16:50:00
一篇文章带你了解python标准库--random模块
2023-09-18 10:45:34
Django框架会话技术实例分析【Cookie与Session】
2021-06-24 03:41:53
Python格式化css文件的方法
2021-02-14 11:38:34
ASP脚本循环语句
2009-02-19 13:34:00
python 查找字符串是否存在实例详解
2023-09-22 21:31:17
python神经网络学习使用Keras进行简单分类
2023-09-18 04:37:23
Python数学形态学实例分析
2022-11-22 22:32:50
微信小程序之数据缓存的实例详解
2024-04-19 09:49:53
python多进程中的生产者和消费者模型详解
2022-09-21 04:46:43
如何基于python实现年会抽奖工具
2022-01-28 04:24:42