小编给大家分享一下bootstrap中modal模态框如何实现动态添加modal框和弹出多个modal框，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
js代码
function initView(_box){
var $p = $(_box || document);
$('a[target="dialog"]', $p).each(function(event){
$(this, $p).unbind('click').click(function(event){
openModal(event);
});
});
}
$(function(){
initView();
});
function hideModal(obj){
var modal = $(obj).parents("div.modal");
if(modal.length > 0){
modal.remove();
initView();
}
}
function openModal(event){
// var this = $(this);
var $this = $(event.currentTarget);
var _url = $this.attr("href");
var _title = $this.attr("title");
var _id;
_id = dialog.content();
var options = {
backdrop: false,
keyboard: true,
show: true
};
$('#' + _id).modal(options);
var modal = $('#' + _id);
if(typeof(_title) != "undefined"){
if(modal.find('.modal-title').length <= 0){
var header = dialog.header({title : _title});
$($.parseHTML(header)).appendTo(modal.find(".modal-content"));
}else{
modal.find('.modal-title').text(_title);
}
if(modal.find('.modal-body').length <= 0){
var _body = dialog.body;
$($.parseHTML(_body)).appendTo(modal.find(".modal-content"));
}
modal.find(".modal-body").load(_url, $.proxy(function () {
modal.trigger('loaded.bs.modal');
initView();
}, this));
}else{
modal.find(".modal-content").load(_url, $.proxy(function () {
modal.trigger('loaded.bs.modal');
initView();
}, this));
}
//阻止事件默认行为
event.preventDefault();
}
//modal model
//TO STRAT
if(!$(window).data("_modal_id")){
$(window).data("_modal_id", 0);
}
var dialog = {
header : function(options){
var template = '<div class="modal-header">'
+ '<button type="button" class="close" aria-label="Close" onclick="hideModal(this);"><span aria-hidden="true">×</span></button>'
+ '<h5 class="modal-title">' + options.title + '</h5>'
+'</div>';
return template;
},
content : function(){
var _modal_id = $(window).data("_modal_id");
var _id = "_modal_id_" + _modal_id;
_modal_id ++;
$(window).data("_modal_id", _modal_id);
var template = '<div class="modal fade" tabindex="-1" role="dialog" id="'+ _id +'">'
+ '<div class="modal-dialog modal-lg" role="document" aria-hidden="true">'
+ '<div class="modal-content">'
+ '</div>'
+ '</div>'
+'</div>';
$(template).appendTo('body');
initView();
return _id;
},
body : '<div class="modal-body"></div>'
};
//TO END页面代码：
<a href="select.html" rel="external nofollow" id="signId" class="btn btn-info" <span >target="dialog"</span> title="请选择用餐类型">签到</a>页面上只要在a标签后加上target="dialog"，并且提供href外部链接地址就可以弹出modal框
以上是“bootstrap中modal模态框如何实现动态添加modal框和弹出多个modal框”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网行业资讯频道！
