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


Posted in Javascript onFebruary 21, 2017

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 = '<div class="modal-header">' 
            +  '<button type="button" class="close" aria-label="Close" onclick="hideModal(this);"><span aria-hidden="true">×</span></button>' 
            +  '<h4 class="modal-title">' + options.title + '</h4>' 
            +'</div>'; 
    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 = '<div class="modal fade" tabindex="-1" role="dialog" id="'+ _id +'">' 
     +  '<div class="modal-dialog modal-lg" role="document" aria-hidden="true">' 
     +   '<div class="modal-content">' 
     +   '</div>' 
     +  '</div>' 
     +'</div>'; 
    $(template).appendTo('body'); 
    initView(); 
    return _id; 
  }, 
  body : '<div class="modal-body"></div>' 
}; 
//TO END

页面代码:

<a href="select.html" rel="external nofollow" id="signId" class="btn btn-info" <span style="background-color: rgb(255, 255, 102);">target="dialog"</span> title="请选择用餐类型">签到</a>

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

以上所述是小编给大家介绍的扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JS图片浏览组件PhotoLook的公开属性方法介绍和进阶实例代码
Nov 09 Javascript
纯JS实现的批量图片预览加载功能
Aug 14 Javascript
JavaScript中几个重要的属性(this、constructor、prototype)介绍
May 19 Javascript
jQuery中json对象的复制方式介绍(数组及对象)
Jun 08 Javascript
js实现tab切换效果实例
Sep 16 Javascript
Bootstrap选项卡动态切换效果
Nov 28 Javascript
jQuery实现判断控件是否显示的方法
Jan 11 Javascript
JQuery和html+css实现带小圆点和左右按钮的轮播图实例
Jul 22 jQuery
浅谈webpack打包生成的bundle.js文件过大的问题
Feb 22 Javascript
详解微信小程序-canvas绘制文字实现自动换行
Apr 26 Javascript
JS/jQuery实现超简单的Table表格添加,删除行功能示例
Jul 31 jQuery
Vue项目打包编译优化方案
Sep 16 Javascript
layer弹出层中H5播放器全屏出错的解决方法
Feb 21 #Javascript
微信小程序 支付功能开发错误总结
Feb 21 #Javascript
微信小程序 点击控件后选中其它反选实例详解
Feb 21 #Javascript
jquery实现下拉框左右选择功能
Feb 21 #Javascript
jquery实现页面加载效果
Feb 21 #Javascript
vue2.0使用Sortable.js实现的拖拽功能示例
Feb 21 #Javascript
javascript 实现文本使用省略号替代(超出固定高度的情况)
Feb 21 #Javascript
You might like
apache+mysql+php+ssl服务器之完全安装攻略
2006/09/05 PHP
计算2000年01月01日起到指定日的天数
2006/10/09 PHP
PHP+Tidy-完美的XHTML纠错+过滤
2007/04/10 PHP
PHP中获取内网用户MAC地址(WINDOWS/linux)的实现代码
2011/08/11 PHP
PHP使用GIFEncoder类处理gif图片实例
2014/07/01 PHP
PHP中使用Imagick实现各种图片效果实例
2015/01/21 PHP
Yii2中OAuth扩展及QQ互联登录实现方法
2016/05/16 PHP
PHP CURL中传递cookie的方法步骤
2019/05/09 PHP
javascript字典探测用户名工具
2006/10/05 Javascript
javascript中&quot;/&quot;运算符常见错误
2010/10/13 Javascript
ASP.NET jQuery 实例13 原创jQuery文本框字符限制插件-TextArea Counter
2012/02/03 Javascript
jquery select动态加载选择(兼容各种浏览器)
2013/02/01 Javascript
Javascript获取CSS伪元素属性的实现代码
2014/09/28 Javascript
简介JavaScript中setUTCSeconds()方法的使用
2015/06/12 Javascript
浅析AngularJs HTTP响应拦截器
2015/12/28 Javascript
学习javascript面向对象 掌握创建对象的9种方式
2016/01/04 Javascript
JavaScript canvas实现跟随鼠标事件
2020/02/10 Javascript
Vue(定时器)解决mounted不能获取到data中的数据问题
2020/07/30 Javascript
跟老齐学Python之通过Python连接数据库
2014/10/28 Python
python实现多张图片拼接成大图
2019/01/15 Python
Python 读取 YUV(NV12) 视频文件实例
2019/12/09 Python
python检查目录文件权限并修改目录文件权限的操作
2020/03/11 Python
python中threading开启关闭线程操作
2020/05/02 Python
Python爬虫爬取博客实现可视化过程解析
2020/06/29 Python
django中cookiecutter的使用教程
2020/12/03 Python
带有css3动画效果的兼容多浏览器简单导航条示例
2014/01/26 HTML / CSS
HTML5 Plus 实现手机APP拍照或相册选择图片上传功能
2016/07/13 HTML / CSS
html5 Canvas画图教程(6)—canvas里画曲线之arcTo方法
2013/01/09 HTML / CSS
AmazeUI 平滑滚动效果的示例代码
2020/08/20 HTML / CSS
美国豪华时尚女性精品店:Kirna Zabête
2018/01/11 全球购物
美国首屈一指的高品质珠宝设计师和零售商:Allurez
2018/01/23 全球购物
群众路线对照检查材料
2014/09/22 职场文书
县委常委班子对照检查材料思想汇报
2014/09/28 职场文书
银行授权委托书格式
2014/10/10 职场文书
学校纪律作风整改措施思想汇报
2014/10/11 职场文书
残联2016年全国助残日活动总结
2016/04/01 职场文书