扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框

js代码functioninitView(_box){var$p=$(_box||document);$('a[target="dialog"]',$p).each(function(event){$(this,$p).unbind

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(); 
}); 
/**关闭modal*/ 
function hideModal(obj){ 
 var modal = $(obj).parents("div.modal"); 
 if(modal.length > 0){ 
 modal.remove(); 
 initView(); 
 } 
} 
/**打开modal*/ 
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>' 
 + '<h4 class="modal-title">' + options.title + '</h4>' 
 +'</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 style="background-color: rgb(255, 255, 102);">target="dialog"</span> title="请选择用餐类型">签到</a> 

页面上只要在a标签后加上target="dialog"，并且提供href外部链接地址就可以弹出modal框

以上所述是小编给大家介绍的扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

bootstrap modal模态框 bootstrap modal