扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框
js代码
functioninitView(_box){
var$p=$(_box||document);
$('a[target="dialog"]',$p).each(function(event){
$(this,$p).unbind('click').click(function(event){
openModal(event);
});
});
}
$(function(){
initView();
});
/**关闭modal*/
functionhideModal(obj){
varmodal=$(obj).parents("div.modal");
if(modal.length>0){
modal.remove();
initView();
}
}
/**打开modal*/
functionopenModal(event){
//varthis=$(this);
var$this=$(event.currentTarget);
var_url=$this.attr("href");
var_title=$this.attr("title");
var_id;
_id=dialog.content();
varoptions={
backdrop:false,
keyboard:true,
show:true
};
$('#'+_id).modal(options);
varmodal=$('#'+_id);
if(typeof(_title)!="undefined"){
if(modal.find('.modal-title').length<=0){
varheader=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();
}
//modalmodel
//TOSTRAT
if(!$(window).data("_modal_id")){
$(window).data("_modal_id",0);
}
vardialog={
header:function(options){
vartemplate='<divclass="modal-header">'
+'<buttontype="button"class="close"aria-label="Close"onclick="hideModal(this);"><spanaria-hidden="true">×</span></button>'
+'<h4class="modal-title">'+options.title+'</h4>'
+'</div>';
returntemplate;
},
content:function(){
var_modal_id=$(window).data("_modal_id");
var_id="_modal_id_"+_modal_id;
_modal_id++;
$(window).data("_modal_id",_modal_id);
vartemplate='<divclass="modalfade"tabindex="-1"role="dialog"id="'+_id+'">'
+'<divclass="modal-dialogmodal-lg"role="document"aria-hidden="true">'
+'<divclass="modal-content">'
+'</div>'
+'</div>'
+'</div>';
$(template).appendTo('body');
initView();
return_id;
},
body:'<divclass="modal-body"></div>'
};
//TOEND
页面代码：
<ahref="select.html"rel="externalnofollow"id="signId"class="btnbtn-info"<spanstyle="background-color:rgb(255,255,102);">target="dialog"</span>title="请选择用餐类型">签到</a>
页面上只要在a标签后加上target="dialog"，并且提供href外部链接地址就可以弹出modal框
以上所述是小编给大家介绍的扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！
热门推荐
3 祝福语简短的微信
10 幼儿祝福语大全简短贺卡
11 感谢教官文案祝福语简短
12 鼠年同事祝福语简短创意
13 元旦祝福语 简短独特群发
14 妈咪跟我生日祝福语简短
15 给儿子新婚祝福语简短
16 伴娘祝福语长文案简短
17 恭喜高考完祝福语简短
18 生日祝福语送老公简短