扩展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 相关文章推荐
用JavaScript脚本实现Web页面信息交互
Oct 11 Javascript
JavaScript创建命名空间(namespace)的最简实现
Dec 11 Javascript
JavaScript 高级篇之函数 (四)
Apr 07 Javascript
关于JavaScript中string 的replace
Apr 12 Javascript
jQuery实现鼠标移到元素上动态提示消息框效果
Oct 20 Javascript
node.js中的path.extname方法使用说明
Dec 09 Javascript
jquery 抽奖小程序实现代码
Oct 12 Javascript
jQuery  ready方法实现原理详解
Oct 19 Javascript
使用jQuery实现一个类似GridView的编辑,更新,取消和删除的功能
Mar 15 Javascript
vue实现模态框的通用写法推荐
Feb 26 Javascript
Vue中el-form标签中的自定义el-select下拉框标签功能
Apr 20 Javascript
vue项目接口域名动态获取操作
Aug 13 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
MYSQL数据库初学者使用指南
2006/11/16 PHP
《PHP边学边教》(04.编写简易的通讯录――视频教程1)
2006/12/13 PHP
php简单判断文本编码的方法
2015/07/30 PHP
PHP实现找出链表中环的入口节点
2018/01/16 PHP
javascript firefox兼容ie的dom方法脚本
2008/05/18 Javascript
javascript对select标签的控制(option选项/select)
2013/01/31 Javascript
animate动画示例(泪奔的小孩)及stop和delay的使用
2013/05/06 Javascript
给js文件传参数(详解)
2014/07/13 Javascript
js禁止页面刷新与后退的方法
2015/06/08 Javascript
获取今天,昨天,本周,上周,本月,上月时间(实例分享)
2017/01/04 Javascript
js图片延迟加载(Lazyload)三种实现方式
2017/03/01 Javascript
VUE + UEditor 单图片跨域上传功能的实现方法
2018/02/08 Javascript
微信小程序使用map组件实现路线规划功能示例
2019/01/22 Javascript
Nodejs核心模块之net和http的使用详解
2019/04/02 NodeJs
Preload基础使用方法详解
2020/02/03 Javascript
vue组件系列之TagsInput详解
2020/05/14 Javascript
Antd的table组件表格的序号自增操作
2020/10/27 Javascript
NodeJS模块Buffer原理及使用方法解析
2020/11/11 NodeJs
js实现碰撞检测
2021/01/29 Javascript
[17:36]VG战队纪录片
2014/08/21 DOTA
python中的for循环
2018/09/28 Python
DRF跨域后端解决之django-cors-headers的使用
2019/01/27 Python
Python中的字符串切片(截取字符串)的详解
2019/05/15 Python
10款最好的Python开发编辑器
2019/07/03 Python
pytorch 模型的train模式与eval模式实例
2020/02/20 Python
python实现逢七拍腿小游戏的思路详解
2020/05/26 Python
详解python方法之绑定方法与非绑定方法
2020/08/17 Python
贝玲妃美国官方网站:Benefit美国
2016/08/28 全球购物
zooplus意大利:在线宠物商店
2019/08/07 全球购物
Ariat英国官网:为世界顶级马术运动员制造最优质的鞋类和服装
2020/02/14 全球购物
中东奢侈品购物网站:Ounass
2020/09/02 全球购物
股东协议书范本
2014/04/14 职场文书
给老婆的保证书范文
2014/04/28 职场文书
施工安全汇报材料
2014/08/17 职场文书
中秋节国旗下演讲稿
2014/09/05 职场文书
Python如何利用pandas读取csv数据并绘图
2022/07/07 Python