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

前端之家收集整理的这篇文章主要介绍了扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

js代码

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,this)); }   //阻止事件默认行为 event.preventDefault(); } //modal model //TO STRAT if(!$(window).data("_modal_id")){ $(window).data("_modal_id",0); } var dialog = { header : function(options){ var template = ''; 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 = '' +'
'; $(template).appendTo('body'); initView(); return _id; },body : '

页面代码

title="请选择用餐类型">签到

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

以上所述是小编给大家介绍的扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

猜你在找的Bootstrap相关文章