扩展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 相关文章推荐
SUN的《AJAX与J2EE》全文译了
Feb 23 Javascript
js 第二代身份证号码的验证机制代码
May 12 Javascript
JS 按钮点击触发(兼容IE、火狐)
Aug 07 Javascript
JavaScript包装对象使用介绍
Aug 29 Javascript
JS中使用sort结合localeCompare实现中文排序实例
Jul 23 Javascript
jQuery源码解读之removeAttr()方法分析
Feb 20 Javascript
JavaScript html5 canvas绘制时钟效果(二)
Mar 27 Javascript
angular2倒计时组件使用详解
Jan 12 Javascript
javascript 产生随机数的几种方法总结
Sep 26 Javascript
vue中vee validate表单校验的几种基本使用
Jun 25 Javascript
JavaScript 绘制饼图的示例
Feb 19 Javascript
详解Vue.js 可拖放文本框组件的使用
Mar 03 Vue.js
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
PHP运行模式的深入理解
2013/06/03 PHP
部署PHP项目应该注意的几点事项分享
2013/12/20 PHP
PHP递归调用数组值并用其执行指定函数的方法
2015/04/01 PHP
php获取图片信息的方法详解
2015/12/10 PHP
php-7.3.6 编译安装过程
2020/02/11 PHP
WebGame《逆转裁判》完整版 代码下载(1月24日更新)
2007/01/29 Javascript
jQuery下实现等待指定元素加载完毕(可改成纯js版)
2013/07/11 Javascript
js弹窗返回值详解(window.open方式)
2014/01/11 Javascript
jquery实现保存已选用户
2014/07/21 Javascript
JavaScript使用focus()设置焦点失败的解决方法
2014/09/03 Javascript
jQuery使用hide方法隐藏元素自身用法实例
2015/03/30 Javascript
JavaScript模块化开发之SeaJS
2015/12/13 Javascript
JS实现兼容火狐及IE iframe onload属性的遮罩层隐藏及显示效果
2016/08/23 Javascript
JS正则表达式修饰符global(/g)用法分析
2016/12/27 Javascript
JS+DIV实现的卷帘效果示例
2017/03/22 Javascript
jQuery与vue实现拖动验证码功能
2018/01/30 jQuery
vue中v-for循环选中点击的元素并对该元素添加样式操作
2020/07/17 Javascript
python根据距离和时长计算配速示例
2014/02/16 Python
python定时器(Timer)用法简单实例
2015/06/04 Python
以视频爬取实例讲解Python爬虫神器Beautiful Soup用法
2016/01/20 Python
老生常谈Python基础之字符编码
2017/06/14 Python
Django入门使用示例
2017/12/12 Python
python利用pandas将excel文件转换为txt文件的方法
2018/10/23 Python
Django框架实现的分页demo示例
2019/05/25 Python
Python如何读写字节数据
2020/08/05 Python
python 统计list中各个元素出现的次数的几种方法
2021/02/20 Python
Expedia丹麦:全球领先的旅游网站
2018/03/18 全球购物
班主任工作经验材料
2014/02/02 职场文书
淘宝店铺营销方案
2014/02/13 职场文书
《走一步再走一步》教学反思
2014/02/15 职场文书
试用期员工工作自我评价
2014/09/10 职场文书
工作检讨书500字
2014/10/19 职场文书
留学推荐信英文范文
2015/03/26 职场文书
2016年教师师德师风心得体会
2016/01/12 职场文书
跟班学习心得体会(共6篇)
2016/01/23 职场文书
如何解决springcloud feign 首次调用100%失败的问题
2021/06/23 Java/Android