扩展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 相关文章推荐
拖动一个HTML元素
Dec 22 Javascript
小型js框架veryide.librar源代码
Mar 05 Javascript
Javascript 匿名函数及其代码模式原理
Mar 19 Javascript
基于jquery实现的表格分页实现代码
Jun 21 Javascript
浅谈JavaScript之事件绑定
Jul 08 Javascript
利用javascript数组长度循环数组内所有元素
Dec 27 Javascript
js与C#进行时间戳转换
Nov 14 Javascript
jquery中push()的用法(数组添加元素)
Nov 25 Javascript
JavaScript实现梯形乘法表的方法
Apr 25 Javascript
JS实现从连接中获取youtube的key实例
Jul 02 Javascript
Angular2中如何使用ngx-translate进行国际化
May 21 Javascript
深入浅析ng-bootstrap 组件集中 tabset 组件的实现分析
Jul 19 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
vBulletin Forum 2.3.xx SQL Injection
2006/10/09 PHP
PHP中CURL的CURLOPT_POSTFIELDS参数使用细节
2014/03/17 PHP
smarty内置函数foreach用法实例
2015/01/22 PHP
基于php的微信公众平台开发入门实例
2015/04/15 PHP
php curl 获取https请求的2种方法
2015/04/27 PHP
PHP 获取客户端 IP 地址的方法实例代码
2018/11/11 PHP
Thinkphp 框架扩展之数据库驱动常用方法小结
2020/04/23 PHP
关于document.cookie的使用javascript
2010/10/29 Javascript
基于jquery的滚动条滚动固定div(附演示下载)
2012/10/29 Javascript
wap图片滚动特效无css3元素纯js脚本编写
2014/08/22 Javascript
jquery 实现返回顶部功能
2014/11/17 Javascript
JS逆序遍历实现代码
2014/12/02 Javascript
js实现鼠标移到链接文字弹出一个提示层的方法
2015/05/11 Javascript
客户端(vue框架)与服务器(koa框架)通信及服务器跨域配置详解
2017/08/26 Javascript
vue2.0 路由模式mode=&quot;history&quot;的作用
2018/10/18 Javascript
echarts大屏字体自适应的方法步骤
2019/07/12 Javascript
解决包含在label标签下的checkbox在ie8及以下版本点击事件无效果兼容的问题
2019/10/27 Javascript
js实现带搜索功能的下拉框
2020/01/11 Javascript
javascript实现画板功能
2020/04/12 Javascript
JavaScript代码压缩工具UglifyJS和Google Closure Compiler的基本用法
2020/04/13 Javascript
微信小程序 button样式设置为图片的方法
2020/06/19 Javascript
Python 比较文本相似性的方法(difflib,Levenshtein)
2018/10/15 Python
python 将对象设置为可迭代的两种实现方法
2019/01/21 Python
pytorch:实现简单的GAN示例(MNIST数据集)
2020/01/10 Python
Jupyter notebook如何修改平台字体
2020/05/13 Python
教你使用Sublime text3搭建Python开发环境及常用插件安装另分享Sublime text3最新激活注册码
2020/11/12 Python
经贸日语专业个人求职信
2013/12/13 职场文书
早读迟到检讨书
2014/01/24 职场文书
幼儿园小班教师寄语
2014/04/03 职场文书
2014年酒店服务员工作总结
2014/12/08 职场文书
优秀党员推荐材料
2014/12/18 职场文书
十二生肖观后感
2015/06/12 职场文书
有关三国演义的读书笔记
2015/06/25 职场文书
大学开学典礼新闻稿
2015/07/17 职场文书
2016年六一儿童节开幕词
2016/03/04 职场文书
MySQL常见优化方案汇总
2022/01/18 MySQL