最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框
时间:2017-04-21 编辑:简简单单 来源:一聚教程网
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){ // var this = $(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(); } //modal model //TO STRAT if(!$(window).data("_modal_id")){ $(window).data("_modal_id", 0); } vardialog = { header :function(options){ vartemplate =' ' ';+ '' + ' '+ options.title +''+' 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 =' ' ';+ ' '+' $(template).appendTo('body'); initView(); return_id; }, body :' '}; //TO END |
页面代码:
代码如下 | 复制代码 |
target="dialog" title="请选择用餐类型">签到 |
页面上只要在a标签后加上target="dialog",并且提供href外部链接地址就可以弹出modal框
-
上一个: jquery实现页面加载效果
-
下一个: 原生js实现倒计时--2018
相关文章
- HTML简单购物数量小程序代码展示 10-31
- html canvas实现弹幕功能 10-31
- HTML中空格表示的意义 10-31
- html area标签解读 10-31
- html使用表单标签实现注册页面代码展示 10-31
- 使用HTML截图并保存为本地图片的代码展示 10-31