扩展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 相关文章推荐
Jquery下的26个实用小技巧(jQuery tips, tricks &amp; solutions)
Mar 01 Javascript
jQuery+jqmodal弹出窗口实现代码分明
Jun 14 Javascript
JavaScript下利用fso判断文件是否存在的代码
Dec 11 Javascript
使用mouse事件实现简单的鼠标经过特效
Jan 30 Javascript
JavaScript中Function详解
Feb 27 Javascript
jquery实现选中单选按钮下拉伸缩效果
Aug 06 Javascript
基于Bootstrap实现图片轮播效果
May 22 Javascript
详解ECharts使用心得总结
Dec 06 Javascript
gulp安装以及打包合并的方法教程
Nov 19 Javascript
详解微信小程序缓存--缓存时效性
May 02 Javascript
vue自定义树状结构图的实现方法
Oct 18 Javascript
解决vue项目中遇到 Cannot find module ‘chalk‘ 报错的问题
Nov 05 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
example1.php
2006/10/09 PHP
rrmdir php中递归删除目录及目录下的文件
2011/05/15 PHP
通过js脚本复制网页上的一个表格的不错实现方法
2006/12/29 Javascript
jquery 表单下所有元素的隐藏
2009/07/25 Javascript
鼠标滚轴控制文本框值的JS代码
2013/11/19 Javascript
jQuery 回车事件enter使用示例
2014/02/18 Javascript
JavaScript中数组继承的简单示例
2015/07/29 Javascript
jQuery动画效果相关方法实例分析
2015/12/31 Javascript
js 判断各种数据类型的简单方法(推荐)
2016/08/29 Javascript
在js里怎么实现Xcode里的callFuncN方法(详解)
2016/11/05 Javascript
jQuery焦点图左右转换效果
2016/12/12 Javascript
如何写好你的JavaScript【推荐】
2017/03/02 Javascript
JavaScript使用readAsDataURL读取图像文件
2017/05/10 Javascript
vue.js实现数据动态响应 Vue.set的简单应用
2017/06/15 Javascript
js实现随机点名小功能
2017/08/17 Javascript
深入理解Vuex 模块化(module)
2017/09/26 Javascript
ES6知识点整理之Proxy的应用实例详解
2019/04/16 Javascript
vue如何限制只能输入正负数及小数
2019/07/04 Javascript
js实现无缝轮播图特效
2020/05/09 Javascript
JavaScript实现缓动动画
2020/11/25 Javascript
[00:56]2014DOTA2国际邀请赛 DK、iG 赛前探访
2014/07/10 DOTA
[03:47]2015国际邀请赛第三日现场精彩回顾
2015/08/08 DOTA
[03:49]2016完美“圣”典风云人物:AMS专访
2016/12/06 DOTA
Python常用模块介绍
2014/11/21 Python
详解python 字符串和日期之间转换 StringAndDate
2017/05/04 Python
Python实现爬取亚马逊数据并打印出Excel文件操作示例
2019/05/16 Python
Python爬虫scrapy框架Cookie池(微博Cookie池)的使用
2021/01/13 Python
python使用Windows的wmic命令监控文件运行状况,如有异常发送邮件报警
2021/01/30 Python
CSS书写规范、顺序和命名规则
2014/03/06 HTML / CSS
CSS3 :not()选择器实现最后一行li去除某种css样式
2016/10/19 HTML / CSS
Hotels.com南非:酒店预订
2017/11/02 全球购物
美国儿童服装、家具和玩具精品店:Maisonette
2019/11/24 全球购物
新店开张活动方案
2014/08/24 职场文书
财务管理专业自荐书
2014/09/02 职场文书
销售员工作检讨书(推荐篇)
2014/10/18 职场文书
golang中字符串MD5生成方式总结
2021/07/04 Golang