扩展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框,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持!