获取Bootstrap3 Modal的调用元素
Bootstrap的模态框(Modal)是一个非常实用的Javascript组件。
从3.0版本开始，Modal对话框的调用元素可以通过show/shown事件中新加入的relatedTarget属性获取
&If caused by a click,&the clicked element is available as the&relatedTarget&property of the event.&
用法如下：
$('#myModal').on('show.bs.modal', function (e) {
var invoker = $(e.relatedTarget);
请看下面这个例子：
模态框在显示之前会先执行alert，显示调用元素的html
Launch modal
代码如下：
$('#myModal').on('show.bs.modal', function (e) {
var invoker = $(e.relatedTarget);
alert(invoker.html());
&!-- Modal --&&div id="myModal" class="modal fade" tabindex="-1"& &div class="modal-dialog"& &div class="modal-content"& &div class="modal-header"&&button class="close" type="button" data-dismiss="modal"&&&/button& &h4 id="myModalLabel" class="modal-title"&Modal title&/h4& &/div& &div class="modal-body"&...&/div& &div class="modal-footer"&&button class="btn btn-default" type="button" data-dismiss="modal"&Close&/button& &button class="btn btn-primary" type="button"&Save changes&/button&&/div& &/div& &!-- /.modal-content --&&/div& &!-- /.modal-dialog --&&/div&&!-- /.modal --&
本文链接：请尊重作者的劳动成果，转载请注明出处！书影博客保留对文章的所有权利。
如果您喜欢这篇博文，欢迎您捐赠书影博客：
没有类似日志
欢迎来到的博客
周一周二周三周四周五周六周日插件描述：扩展自原生的Bootstrap对话框并提供一些额外的功能。 它引入一个ModalManager类，能够在屏幕后处理多个模态对话框，通过监听他们的事件实现。
扩展自原生的Bootstrap对话框并提供一些额外的功能。 它引入一个ModalManager类，能够在屏幕后处理多个模态对话框，通过监听他们的事件实现。特性：&向后兼容响应式可堆叠全屏通过Ajax加载内容禁用背景滚动
相关插件-弹出层
讨论这个项目（4）回答他人问题或分享插件使用方法奖励jQ币
?一?。腠然??用，但是很好。作?一?例子展示bootstrap的modal用法。
请问如何引入啊，需要哪些文件，小白不懂谢谢
这是bootstrap2吧
bootstrap本身兼容都没有达到IE6吧。。。请慎重填写兼容性啊。
PROMULGATOR
早起的鸟儿
关注作者 (2)
收藏此插件 (56)
我当前jQ币余额：正在获取..
已下载次数：983
所需jQ币：0本文我将为大家介绍Bootstrap中的弹出窗口组件Modal,此组件简单易用，效果大气漂亮且很实用！由于浏览器提供的alert和confirm框体验不好，而且浏览器没有提供一个标准的以对话框的形式显示自定义HTML的弹框函数，所以很多项目都会自定义对话框组件。本篇文章介绍自己在项目中基于bootstrap的modal组件，自定义alert，confirm和modal对话框的经验，相对比较简单实用，希望能对你有所参考价值。1. 实例展示详细的代码可通过前面给出的下载链接下载源码去了解，代码量不大，这三个组件加起来只有200多行如果你有javascript的组件开发经验，我这个层级的代码相信你一下子就能看明白。源码中我还给出了一个demo，这个demo模拟了一个比较贴近现实需求的一个场景：1）用户点击界面上的某个按钮，打开之前定义的一个modal框：2）用户在打开的modal框内填写一些表单，点击确定的时候，会触发一些校验：没填email时：填写了email之后：这两个提示其实是为了演示Alert和Confirm的效果硬塞进去的，实际上可能没有这么别扭的功能。3）在提示Password为空的时候，细心的人会发现那个确定按钮处于一个禁用的状态，这个考虑是因为确定按钮最终要完成的是一些异步任务，在异步任务成功完成之前，我希望modal组件都不要关闭，并且能够控制已点击的按钮不能重复点击；4）我用setTimeout模拟了一个异步任务，这个异步任务在点击确定按钮之后，3s才会回调，并且：当email输入 的时候，会给出提交成功的提示，确定之后就会关闭所有的弹框：当email输入其它值得时候，会给出提交失败的提示，并且modal框会依然显示在那里：在组件定义里面，尤其是注册按钮这一块，我加了一些AOP编程的处理，同时利用了jquery的延迟对象，来实现我需要的异步编程，详情请阅读源码，有问题可以在评论区交流赐教。2. 组件需求有时候为了写一个好用的组件，只需要把它的大概原型和要对外部提供的接口确定下来，就已经完成这个组件编写最重要的工作了，虽然还没有开始编码。以本文要编写的这几个组件来说，我想要的这几个组件的原型和调用形式分别是这样的：1）自定义alert框原型是：调用时最多需要两个参数，一个msg用来传递要显示的提示内容，一个onOk用来处理确定按钮点击时候的回调，调用形式有以下2种：//1
Alert('您选择的订单状态不符合当前操作的条件，请刷新列表显示最新数据后再继续操作！');
msg: '您选择的订单状态不符合当前操作的条件，请刷新列表显示最新数据后再继续操作！',
onOk: function(){
});第一种是没有回调的情况，那么直接传递msg即可，第二种是有回调的情况，用options对象的方式来传递msg和onOks回调这两个参数。不管onOk回调有没有，点击按钮的时候都要关闭弹框。2）自定义confirm框这个框的原型跟alert框只差一个按钮：调用形式只有一种：Confirm({
msg: '您选择的订单状态不符合当前操作的条件，请确认是否要继续操作！',
onOk: function(){
onCancel: function(){
});onCancel是在点击取消按钮时候的回调。不管onOk和onCancel回调有没有，点击按钮的时候都要关闭弹框。onCancel回调可以没有。3）自定义modal框原型：调用形式：var modal = new Modal({
title: '',
content: '',
width: 600,
buttons: [
html: '&button type="button" class="btn btn-sm btn-primary btn-ok"&确定&/button&',
selector: '.btn-ok',
callback: function(){
//点击确定按钮的回调
html: '&button type="button" class="btn btn-sm btn-default btn-cancel"&取消&/button&',
selector: '.btn-cancel',
callback: function(){
//点击取消按钮的回调
onContentReady: function(){
//当modal添加到DOM并且初始化完毕时的事件回调，每个modal实例这个回调只会被触发一次
onContentChange: function(){
//当调用modal.setContent类似的方法改变了modal内容时的事件回调
onModalShow: function(){
//当调用modal.open类似方法显示modal时都会触发的事件回调
onModalHide: function(){
//当调用modal.hide类似方法隐藏modal时都会触发的事件回调
$('#btn-audit').click(function(){
modal.open();
});跟Alert和Confirm不同的是，一个页面里面只需要一个Alert和Confirm的实例，但是可能需要多个Modal的实例，所以每个Modal对象都需要单独new一下。由于每个Modal要完成的事情都不相同，所以：需要一个title参数来设置名称，表达这个Modal正在处理的事情；content参数表示Modal的html内容；width参数设置Modal的宽度，Modal的高度保持auto；buttons参数用来配置这个Modal上面的按钮，一般情况下Modal组件只需要两个按钮（确定和取消）就够了，但也有少数情况需要多个按钮，所以把按钮做成配置的方式相对灵活一点，每个按钮用三个参数来配置，html表示按钮的html结构，selector方便注册回调的时候通过事件委托的方式来处理，callback配置按钮点击时的回调；onContentReady这个事件回调，可以在Modal初始化完毕的时候，主动去初始化Modal内部html的一些组件；由于组件初始化一般只进行一次，所以放在这个回调里面最合适；onContentChange回调，在一个Modal需要被用作不同的场景，显示不同的HTML的内容时会派上用场，但是不是非常的好用，处理起来逻辑会稍微偏复杂，如果一个Modal实例只做一件事情的时候，onContentChange这个回调就用不到了；onModalShow这个回调在每次显示Modal的时候都会显示，使用的场景有很多，比如某个Modal用来填写一些表单内容，下次填写的时候需要reset一下表单才能给用户使用，这种处理在这个回调里面处理就比较合适；onModalHide这个回调有用，不过能够用到的场景不多，算是预留的一个接口。4）其它需求所有类型的弹框都做成虚拟模态的形式，显示框的同时加一个遮罩；所有框都不需要支持拖动和大小调整；alert和dialog框的标题，按钮数量、按钮位置、按钮文字都固定。实际上：遮罩这个效果，bootstrap的modal组件本身就已经支持了；拖动和大小调整，这个功能属于锦上添花，但是对软件本身来说，并一定有多少额外的好处，所以我选择不做这种多余的处理；alert和dialog不需要做太过个性化，能够统一风格，改变浏览器原生的弹框体验即可。5）DEMO中调用实例接下来演示下我在完成这三个组件开发之后，实际使用过程中调用这些组件的方式：var modal = new Modal({
title: '测试modal',
content: $('#modal-tpl').html(),
width: 500,
onOk: function(){
var $form = this.$modal.find('form');
var data = $form.serializeArray();
var postData = {};
data.forEach(function(obj){
postData[obj.name] = obj.
if(!postData.email) {
Alert('请输入EMAIL!');
var deferred = $.Deferred();
if(!postData.password) {
msg: 'Password为空，是否要继续？',
onOk: function(){
onCancel: function(){
deferred.reject();
return $.when(deferred);
function _post(){
//模拟异步任务
setTimeout(function(){
if(postData.email === 'admin@admin') {
msg: '提交成功！',
onOk: function(){
deferred.resolve();
msg: '提交失败！',
onOk: function(){
deferred.reject();
onModalShow: function () {
var $form = this.$modal.find('form');
$form[0].reset();
$('#btn-modal').click(function () {
modal.open();
});3. 实现要点1）最基础的一点，要对bootstrap的modal组件源码有所了解：初始化方式：$modal.modal()打开：$modal.modal('show')关闭：$modal.modal(hide)事件：bootstrap大部分带过渡效果的组件的事件都是成对的，并且一个是现在时，一个是完成时，modal组件定义了2对：show.bs.modal和shown.bs.modal，hide.bs.modal和hidden.bs.modal。这两对事件分别在打开和关闭的过渡效果执行前后触发。从我要定义的组件需求来说，定义组件的时候需要show.bs.modal和hidden.bs.modal这两个事件，在侦听到bootstrap的modal组件派发这两个事件的时候，派发自己定义的组件的事件：modalShow和modalHide。选项：backdrop： 是否显示遮罩；keyboard： 是否支持键盘回调；show：是否在初始化完毕就立即显示。这三个选项默认都是true，但是在我定义组件的时候，我都配置成了false，键盘回调这种特性暂时不考虑，所以配置为true；当调用bootstrap的modal初始化的时候当然不能立即显示弹框，所以也不能配置为true；backdrop配置为false的原因在下一点介绍。2）遮罩处理如果启用bootstrap的遮罩，会发现在点击遮罩部分的时候，弹框就会自动关掉了，这不是我期望的虚拟模态效果，所以必须把backdrop配置为false。但是把这个选项配置为false之后，又会引发一个新问题，就是组件没有了遮罩效果，所以为了兼顾这两个问题，只能自己写一个简单的遮罩处理：var $body = $(document.body),
BackDrop = (function () {
var $backDrop,
count = 0,
create = function () {
$backDrop = $('&div class="modal-backdrop fade in"&&/div&').appendTo($body);
show: function () {
!$backDrop && create();
$backDrop[0].style.display = 'block';
hide: function () {
if (!count) {
$backDrop.remove();
$backDrop =
})();这段代码中引入count变量的原因是因为BackDrop是一个全局的单例对象，当调用多个modal实例的open方法的时候，都会调用BackDrop的show方法，为了保证在调用BackDrop的hide方法时，能够确保在所有的modal实例都关闭之后再隐藏Backdrop，所以就加了一个count变量来记录BackDrop的show方法被调用了多少次，只有当count为0的时候，调用BackDrop的hide方法才会真正隐藏BackDrop。3）组件的选项的默认值定义ModalDialog.defaults = {
title: '',
content: '',
width: 600,
buttons: [
html: '&button type="button" class="btn btn-sm btn-primary btn-ok"&确定&/button&',
selector: '.btn-ok',
callback: getDefaultBtnCallbackProxy('onOk')
html: '&button type="button" class="btn btn-sm btn-default btn-cancel"&取消&/button&',
selector: '.btn-cancel',
callback: getDefaultBtnCallbackProxy('onCancel')
onOk: $.noop,
onCancel: $.noop,
onContentReady: $.noop,
onContentChange: $.noop,//content替换之后的回调
onModalShow: $.noop,
onModalHide: $.noop//modal关闭之后的回调
};通过buttons配置两个默认的按钮，确定和取消，然后为了简化这两个默认按钮的回调配置，把这两个按钮的接口进一步扩展到了上一级别，onOk和onCancel分别会在点击确定和取消的时候被调用，这两个选项完全是函数回调，不像onContentReady这种属于事件回调。getDefaultBtnCallbackProxy用来辅助注册onOk和onCancel：var getDefaultBtnCallbackProxy = function (callbackName) {
return function () {
var opts = this.options,
callback = opts[callbackName] && typeof opts[callbackName] === 'function' ? opts[callbackName] : '';
return callback && callback.apply(this, arguments);
}里面的this会被绑定到modal实例上。4）构造函数：function ModalDialog(options) {
this.options = this.getOptions(options);
this.$modal =
this.$modalTitle =
this.$modalBody =
this.$modalFooter =
this.state =
}这个主要是声明了用到的一些实例变量。5）关键的原型方法和函数open: function (state) {
this.state =
!this.$modal && initModal(this, this.options);
BackDrop.show();
this.$modal.modal('show');
}这是个原型方法，组件的初始化也是在这个方法调用的时候执行的（延迟初始化）。initModal = function (that, opts) {
var $modal = createModal(that);
that.setTitle(opts.title);
that.setContent(opts.content);
that.addButtons(opts.buttons);
that.setWidth(opts.width);
bindHandler(that, opts);
$modal.modal();//调用bootstrap的Modal组件
$modal.trigger('contentReady');
}这是个函数，用来初始化组件。其中：setTitle是个原型方法，用来设置modal的标题；setContent是个原型方法，用来设置modal的html内容；addButtons是个原型方法，用来注册按钮；setWidth是个原型方法，用来设置modal的宽度；bindHandler是个函数，用来注册modal的那些事件；倒数第二步调用$modal.modal()初始化bootstrap的modal组件；最后一步触发contentReady事件。bindHandler源码：bindHandler = function (that, opts) {
var $modal = that.$
typeof opts.onContentChange === 'function' && $modal.on('contentChange', $.proxy(opts.onContentChange, that));
typeof opts.onContentReady === 'function' && $modal.on('contentReady', $.proxy(opts.onContentReady, that));
typeof opts.onModalShow === 'function' && $modal.on('modalShow', $.proxy(opts.onModalShow, that));
typeof opts.onModalHide === 'function' && $modal.on('modalHide', $.proxy(opts.onModalHide, that));
$modal.on('show.bs.modal', function () {
$modal.trigger('modalShow');
$modal.on('hidden.bs.modal', function () {
$modal.trigger('modalHide');
}为了方便使用，我把onContentChange这几个回调的上下文绑定到了当前的modal实例。最后两个事件侦听就是把bootstrap的事件封装成了我定义的modal事件。addButtons源码：addButtons: function (buttons) {
var buttons = !$.isArray(buttons) ? [] : buttons,
that = this,
htmlS = [];
buttons.forEach(function (btn) {
htmlS.push(btn.html);
btn.selector && that.$modal.on('click', btn.selector, $.proxy(function (e) {
var self = this,
$btn = $(e.currentTarget);
//先禁用按钮
$btn[0].disabled =
var callback = typeof btn.callback === 'function' ? btn.callback : '',
ret = callback && callback.apply(self, arguments);
if (ret === false) {
$btn[0].disabled =
if (typeof(ret) === 'object' && 'done' in ret && typeof ret['done'] === 'function') {
//异步任务只有在成功回调的时候关闭Modal
ret.done(function () {
that.hide();
}).always(function () {
$btn[0].disabled =
$btn[0].disabled =
that.hide();
}, that));
this.$modalFooter.prepend($(htmlS.join('')));
}从这个代码可以看出：当按钮点击之后，按钮就会被禁用；当按钮返回false的时候，按钮恢复，但是modal不会被关闭，说明当前的一些操作被代码给拦下来了；当按钮返回的是一个延迟对象的时候，会等到延迟对象完成的时候才会恢复按钮，并且只有在延迟对象resolve的时候才会关闭modal；否则就恢复按钮，并主动关闭modal。在这段代码里面考虑了：按钮的防重复点击，modal的自动关闭以及异步任务的处理。6）封装Alert和ConfirmAlert和Confirm其实就是一个特殊的modal，另外这两个组件还可以共用一个modal，了解到这些基础之后，组件就可以这样定义：var Alert, C
(function () {
var modal,
Proxy = function (isAlert) {
return function () {
if (arguments.length != 1)
var msg = typeof arguments[0] === 'string' && arguments[0] || arguments[0].msg || '',
onOk = typeof arguments[0] === 'object' && typeof arguments[0].onOk === 'function' && arguments[0].onOk,
onCancel = typeof arguments[0] === 'object' && typeof arguments[0].onCancel === 'function' && arguments[0].onCancel,
width = typeof arguments[0] === 'object' && arguments[0].width || 400,
_onModalShow = function () {
this.setWidth(width);
this.setContent(msg);
this[(isAlert ? 'hide' : 'show') + 'Button']('.btn-cancel');
_onModalHide = function () {
this.setContent('');
//延迟初始化modal
if(!modal) {
modal = new Modal({
'title': '操作提示',
onModalShow: _onModalShow,
onModalHide: _onModalHide,
onContentReady: function(){
this.$modalBody.css({
'padding-top': '30px',
'padding-bottom': '30px'
//如果modal已经初始化则需要重新监听事件
var $modal = modal.$
$modal.off('modalShow modalHide');
$modal.off('modalShow modalHide');
$modal.on('modalShow', $.proxy(_onModalShow, modal));
$modal.on('modalHide', $.proxy(_onModalHide, modal));
modal.setOptions({
onOk: onOk || $.noop,
onCancel: onCancel || $.noop
modal.open();
Alert = Proxy(true);
Confirm = Proxy();
})();这段代码里：首先考虑到了延迟初始化这个全局的modal组件；由于onModalHide和onModalShow这两个回调属于事件回调，在初始化组件的时候通过options传进去的参数，不能通过修改options的方式来更改回调，只能通过重新注册的方式来处理；而onOk和onCancel属于函数回调，只要更改了options里面的引用，回调就能更改；考虑到Alert和Confirm内容的长短，新加了一个参数width，以便调节框的宽度。4. 小结本文介绍的是自己在定义js组件过程中的一些方法和实践，代码偏多，不容易引起人的阅读兴趣，但是文中介绍的方法比较简单，而且这三个组件我已经用到好几个项目里面，从目前来看，能够解决我所有需要的弹框需求，所以我把它推荐出来，希望能给有需要的人带来帮助。您可能感兴趣的文章:
如果您想留下此文，您可以将其发送至您的邮箱(将同时以邮件内容&PDF形式发送)
相关文章推荐
(Ctrl+Enter提交) &&
已有0人在此发表见解
&在& 00:00收藏到了
&&在信息爆炸的时代，您的知识需要整理，沉淀，积累！Lai18为您提供一个简单实用的文章整理收藏工具，在这里您可以收藏对您有用的技术文章，自由分门别类，在整理的过程中，用心梳理自己的知识！相信，用不了多久，您收藏整理的文章将是您一生的知识宝库！
· 蜀ICP备号-1bootstrap提供了一个写好的css文件和js文件然而在使用时遇到了一下并不是很好的问题，今天在使用弹出对话框时遇到了一个这样的问题
&a class="btn" data-toggle="modal" href="#myModal" data-keyboard="false" data-backdrop="true" &点击"无ESC关闭，无遮蔽背景"演示&/a&
&div class="modal" id="myModal"&
&div class="modal-header"&
&a class="close" data-dismiss="modal"&×&/a&
&h3&对话框标题&/h3&
&div class="modal-body"&
&p&对话框内容&/p&
&div class="modal-footer"&
&a href="#" class="btn"&关闭&/a&
&a href="#" class="btn btn-primary"&保存更新&/a&
问题是当单机对话框的边缘时就是阴暗的背影时对话框自动消失，查看了bootstrap的官网也没找到最后在中文翻译的网站找到原因了是因为data-backdrop设置为true当设置为false时背景就消失了
背景消失但是下面的所有按钮都是可单机的与原来的弹出对话框截然不同
找了一下午找了一个解决方案就是在就是在对话框下面body上面铺一层div背景色设置为black 透明度设置为0.5
div设置的属性是Z-index为正数
z-index:100；
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
注释：元素可拥有负的 z-index 属性值。
注释：Z-index 仅能在定位元素上奏效（例如 position:）！
该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。
写一段脚本语言
$(document).ready(function(){
var width=document.body.clientW//网页可见区域宽
var height=document.body.clentH//网页可见区域高
$("&div style='width:"+width+" height:"+height+" position:left:0top:0z-index:100'&&/div&").appendTo("bofy");
这样就实现覆盖了，具体单机时覆盖单机时覆盖解除，很简单就能做到
下面来写一下获取屏幕，浏览器，网页的宽高
HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth
scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量
IE，FireFox 差异如下：
IE6.0、FF1.06+：
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
IE5.0/5.5：
clientWidth = width - border
clientHeight = height - border
offsetWidth = width
offsetHeight = height
(需要提一下：CSS中的margin属性，与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)
网页可见区域宽： document.body.clientWidth
网页可见区域高： document.body.clientHeight
网页可见区域宽： document.body.offsetWidth (包括边线的宽)
网页可见区域高： document.body.offsetHeight (包括边线的高)
网页正文全文宽： document.body.scrollWidth
网页正文全文高： document.body.scrollHeight
网页被卷去的高： document.body.scrollTop
网页被卷去的左： document.body.scrollLeft
网页正文部分上： window.screenTop
网页正文部分左： window.screenLeft
屏幕分辨率的高： window.screen.height
屏幕分辨率的宽： window.screen.width
屏幕可用工作区高度： window.screen.availHeight
屏幕可用工作区宽度： window.screen.availWidth
－－－－－－－－－－－－－－－－－－－
本节代码主要使用了Document对象关于窗口的一些属性，这些属性的主要功能和用法如下。
要得到窗口的尺寸，对于不同的浏览器，需要使用不同的属性和方法：若要检测窗口的真实尺寸，在Netscape下需要使用Window的属性；在IE下需要深入Document内部对body进行检测；在DOM环境下，若要得到窗口的尺寸，需要注意根元素的尺寸，而不是元素。
Window对象的innerWidth属性包含当前窗口的内部宽度。Window对象的innerHeight属性包含当前窗口的内部高度。
Document对象的body属性对应HTML文档的标签。Document对象的documentElement属性则表示HTML文档的根节点。
document.body.clientHeight表示HTML文档所在窗口的当前高度。document.body. clientWidth表示HTML文档所在窗口的当前宽度。
PS：bootstrap modal draggable问题小结
最近项目中用到了bootstrap modal框，想为其实现draggable效果，在为其添加js代码$('.modal-dialog').draggable()后结果还是没有draggable效果，后面发现是在 另一处代码块存在doc[0].ondragstart = doc[0].onselectstart = function () { }（此处禁用了draggable事件），当删除该处代码后结果就能实现draggable效果。
以上所述是小编给大家介绍的使用 bootstrap modal遇到的问题小结,实现一个模拟后台数据登入的效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对就爱阅读网站的支持！
欢迎转载：
推荐：