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="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插件使用详细请看：http://v3.bootcss.com/javascript/#modals
分享到：
相关推荐
Bootstrap Modal是Bootstrap框架提供的一个组件，用于创建模态对话框，而拖拽功能通常指的是用户可以通过鼠标操作移动页面中的元素。 在Bootstrap框架中实现Modal组件的拖拽功能，需要借助于jQuery和jQuery UI库。...
Bootstrap Modal拖拽实现方法详解 Bootstrap Modal是Bootstrap框架中的一种常用的弹出窗口组件，然而 Default 的Bootstrap Modal并不具备拖拽功能，这就需要我们自己来实现。下面我们将详细介绍如何为Bootstrap ...
2. **功能扩展**：可能添加了新的功能，比如自动关闭、拖拽移动、弹窗堆叠等，使得对话框更加灵活。 3. **事件处理**：可能提供了更丰富的事件接口，让用户可以更方便地监听和响应Modal的生命周期事件，如打开、关闭...
在Bootstrap中，模态框默认并不具备拖拽功能。要实现这一效果，通常需要借助JavaScript库，如jQuery，以及一些自定义的CSS样式和事件处理。以下是一个简化的实现过程： 1. **引入必要的库**： 首先，确保你的页面...
"bootstrap布局可视化可拖拽"这个主题指的是使用Bootstrap配合某些可视化工具或插件，实现布局元素的拖放功能，从而让开发者可以直观地调整网页布局。 Bootstrap的基础布局系统依赖于网格（Grid System），它将页面...
总的来说，这个基于Bootstrap的表单拖拽生成器是一个强大的工具，它结合了Bootstrap的易用性和JavaScript的动态性，使得非程序员也能轻松创建功能齐全的表单。对于开发者而言，它能够节省大量的编码时间，提高工作...
4. **JavaScript 插件**：Bootstrap3 包含了一些JavaScript插件，如滚动监听（`scrollspy`）、模态对话框（`modal`）、轮播（`carousel`）、折叠（`collapse`）等，这些插件可以扩展HTML元素的功能。 5. **定制**：...
为了使用可拖拽的非模态窗口，可能需要扩展Bootstrap的模态插件，添加拖放功能。 在压缩包中的"draggableModaless-test"文件可能是示例代码或测试用例，包含HTML、CSS和JavaScript文件。通过查看和运行这些文件，你...
例如，使用Bootstrap的`form-group`、`input[type="file"]`等元素来创建文件选择器，同时可能使用`data-toggle="modal"`属性结合模态框来实现更丰富的交互效果，如预览上传文件。 文件拖拽选择功能通常通过HTML5的`...
在Axure 9中，Bootstrap 4元件库将这些特性转化为可拖拽的组件，使非编码背景的原型设计师也能方便地利用Bootstrap的风格和功能。例如，你可以直接从元件库中选择导航条组件，设置其颜色、链接和响应式行为；或者...
除了基本的打开和关闭操作，Dialog.js还支持其他高级功能，如添加动态内容、自定义大小、拖拽功能、自动关闭计时器等。例如，通过设置`draggable`选项为`true`，我们可以使对话框变得可拖动： ```javascript var ...
总的来说，实现Bootstrap模态框的水平垂直居中和拖拽功能需要结合CSS和JavaScript技术。通过上述方法，我们可以创建出既美观又实用的模态框，提升用户体验。在实际项目中，你可以根据需求调整这些代码，例如添加动画...
标题 "拖拽生成html.zip" 描述了一个使用Bootstrap框架创建HTML表单的过程，该过程具有可视化拖拽功能，使得不熟悉前端HTML代码的人也能轻松构建页面。Bootstrap是一种流行的开源前端开发框架，它提供了丰富的预定义...
在实际应用中，"doublebox-bootstrap.js" 插件可能与其他Bootstrap组件结合使用，如模态框（modal）、下拉菜单（dropdowns）或表单元素，以提供更丰富的用户体验。例如，当用户在选择器中做出选择时，可能需要显示一...
6. **组件和小部件**：如时间线（timeline）、轮播（carousel）、模态对话框（modal）等，丰富了原型的动态功能。 7. **图标和图形**：Bootstrap4自带的 Glyphicons 或 Font Awesome 图标库，可以在原型中方便地...
4. **JavaScript插件（JavaScript Plugins）**：Bootstrap包含了一些基于jQuery的插件，如下拉菜单（Dropdowns）、轮播（Carousel）、模态（Modal）等，它们增强了网页的交互性。 5. **自定义（Customization）**：...