扩展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下的动画处理总结
Oct 10 Javascript
Jquery实现侧边栏跟随滚动条固定(兼容IE6)
Apr 02 Javascript
vue2.0开发实践总结之疑难篇
Dec 07 Javascript
微信小程序自动客服功能
Nov 02 Javascript
vue单页应用在页面刷新时保留状态数据的方法
Sep 21 Javascript
深入浅析javascript函数中with
Oct 28 Javascript
Mint UI实现A-Z字母排序的城市选择列表
Dec 28 Javascript
JavaScript学习教程之cookie与webstorage
Jun 23 Javascript
jQuery实现轮播图源码
Oct 23 jQuery
解决Vue打包上线之后部分CSS不生效的问题
Nov 12 Javascript
Vue基础配置讲解
Nov 29 Javascript
Vue实现base64编码图片间的切换功能
Dec 04 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
php高级编程-函数-郑阿奇
2011/07/04 PHP
php过滤html中的其他网站链接的方法(域名白名单功能)
2014/04/24 PHP
PHP 验证登陆类分享
2015/03/13 PHP
php从身份证获取性别和出生年月
2017/02/09 PHP
CentOS系统中PHP安装扩展的方式汇总
2017/04/09 PHP
PHP基于SMTP协议实现邮件发送实例代码
2017/04/27 PHP
PHP调用微博接口实现微博登录的方法示例
2018/09/22 PHP
Ext 表单布局实例代码
2009/04/30 Javascript
详解JavaScript中的every()方法
2015/06/08 Javascript
js正则表达式验证邮件地址
2015/11/12 Javascript
关于JS中的apply,call,bind的深入解析
2016/04/05 Javascript
jQuery中ajax错误调试分析
2016/12/01 Javascript
JavaScript实现焦点进入文本框内关闭输入法的核心代码
2017/09/20 Javascript
layui自己添加图片按钮并点击跳转页面的例子
2019/09/14 Javascript
npm qs模块使用详解
2020/02/07 Javascript
keep-alive不能缓存多层级路由菜单问题解决
2020/03/10 Javascript
解决vue+webpack项目接口跨域出现的问题
2020/08/10 Javascript
vue+springboot+element+vue-resource实现文件上传教程
2020/10/21 Javascript
python基础教程之python消息摘要算法使用示例
2014/02/10 Python
Python可变参数用法实例分析
2017/04/02 Python
python画蝴蝶曲线图的实例
2019/11/21 Python
html5应用缓存_动力节点Java学院整理
2017/07/13 HTML / CSS
html5实现图片转圈的动画效果——让页面动起来
2017/10/16 HTML / CSS
Booking.com德国:预订最好的酒店和住宿
2020/02/16 全球购物
运行时异常与一般异常有何异同?
2014/01/05 面试题
网络体系结构及协议的定义
2014/03/13 面试题
新闻发布会策划方案
2014/06/12 职场文书
2014年大学生党员自我评议
2014/09/22 职场文书
2014年文艺部工作总结
2014/11/17 职场文书
2014年施工员工作总结
2014/11/18 职场文书
2014年销售工作总结范文
2014/12/01 职场文书
呼啸山庄读书笔记
2015/06/29 职场文书
公司酒会主持词
2015/07/02 职场文书
PHP中strval()函数实例用法
2021/06/07 PHP
小程序实现悬浮按钮的全过程记录
2021/10/16 HTML / CSS
Python获取字典中某个key的value
2022/04/13 Python