扩展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 相关文章推荐
关于图片验证码设计的思考
Jan 29 Javascript
javascript YUI 读码日记之 YAHOO.util.Dom - Part.4
Mar 22 Javascript
JQuery 插件制作实践 xMarquee插件V1.0
Apr 02 Javascript
jQuery侧边栏随窗口滚动实现方法
Mar 04 Javascript
固定背景实现的背景滚动特效示例分享
May 19 Javascript
原生javascript实现图片弹窗交互效果
Jan 12 Javascript
百度地图去掉marker覆盖物或者去掉maker的label文字方法
Jan 26 Javascript
layui动态渲染生成select的option值方法
Sep 23 Javascript
JQuery样式与属性设置方法分析
Dec 07 jQuery
JS实现联想、自动补齐国家或地区名称的功能
Jul 07 Javascript
解决Vue的项目使用Element ui 走马灯无法实现的问题
Aug 03 Javascript
详解vue组件之间的通信
Aug 30 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
全国FM电台频率大全 - 21 海南省
2020/03/11 无线电
Laravel 5框架学习之表单
2015/04/08 PHP
PHP中把数据库查询结果输出为json格式简单实例
2015/04/09 PHP
老生常谈php中传统验证与thinkphp框架(必看篇)
2017/06/10 PHP
javascript数组去重的方法汇总
2015/04/14 Javascript
jQuery编程中的一些核心方法简介
2015/08/14 Javascript
js实现适用于素材网站的黑色多级菜单导航条效果
2015/08/24 Javascript
实例代码讲解jquery easyui动态tab页
2015/11/17 Javascript
三种AngularJS中获取数据源的方式
2016/02/02 Javascript
浅谈js多维数组和hash数组定义和使用
2016/07/27 Javascript
Javascript中内建函数reduce的应用详解
2016/10/20 Javascript
node.js学习之base64编码解码
2016/10/21 Javascript
easyui-combobox 实现简单的自动补全功能示例
2016/11/08 Javascript
js 点击a标签 获取a的自定义属性方法
2016/11/21 Javascript
node.js版本管理工具n无效的原理和解决方法
2016/11/24 Javascript
详解angular ui-grid之过滤器设置
2017/06/07 Javascript
javaScript中的空值和假值
2017/12/18 Javascript
解决vue-cli单页面手机应用input点击手机端虚拟键盘弹出盖住input问题
2018/08/25 Javascript
vue组件开发props验证的实现
2019/02/12 Javascript
浅谈Javascript常用正则表达式应用
2019/03/08 Javascript
js实现拾色器插件(ColorPicker)
2020/05/21 Javascript
[47:21]Liquid vs TNC Supermajor 胜者组 BO3 第一场 6.4
2018/06/05 DOTA
Python生成随机MAC地址
2015/03/10 Python
简单谈谈Python中的元祖(Tuple)和字典(Dict)
2017/04/21 Python
python 实现图片旋转 上下左右 180度旋转的示例
2019/01/24 Python
在python中,使用scatter绘制散点图的实例
2019/07/03 Python
Python3变量与基本数据类型用法实例分析
2020/02/14 Python
基于pytorch padding=SAME的解决方式
2020/02/18 Python
如何解决cmd运行python提示不是内部命令
2020/07/01 Python
python连接mysql数据库并读取数据的实现
2020/09/25 Python
新加坡网上美容店:Hermo新加坡
2019/06/19 全球购物
致全体运动员广播稿
2014/02/01 职场文书
机关作风建设心得体会
2014/10/22 职场文书
军训决心书范文
2015/09/22 职场文书
Spring Data JPA框架的核心概念和Repository接口
2022/04/28 Java/Android
python库Tsmoothie模块数据平滑化异常点抓取
2022/06/10 Python