bootstrap中modal模态框如何实现动态添加modal框和弹出多个modal框
小编给大家分享一下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(); }); /**关闭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 = '' + '' + ''; 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 = '' + options.title + '
' +'' + ''; $(template).appendTo('body'); initView(); return _id; }, body : '' }; //TO END' + '' +'' + '' + '
页面代码:
target="dialog" title="请选择用餐类型">签到
页面上只要在a标签后加上target="dialog",并且提供href外部链接地址就可以弹出modal框
以上是“bootstrap中modal模态框如何实现动态添加modal框和弹出多个modal框”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!
名称栏目:bootstrap中modal模态框如何实现动态添加modal框和弹出多个modal框
文章位置:http://pwwzsj.com/article/gppepi.html