扩展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删除当前行,添加行(示例代码)
Nov 25 Javascript
JS实现一个按钮的方法
Feb 05 Javascript
jQuery实现文本展开收缩特效
Jun 03 Javascript
javascript电商网站抢购倒计时效果实现
Nov 19 Javascript
关于动态执行代码(js的Eval)实例详解
Aug 15 Javascript
jQuery实现弹幕效果
Feb 17 Javascript
详解AngularJS脏检查机制及$timeout的妙用
Jun 19 Javascript
Vue2.0用户权限控制解决方案的示例
Feb 10 Javascript
浅谈Node.js 中间件模式
Jun 12 Javascript
微信小程序在ios下Echarts图表不能滑动的问题解决
Jul 10 Javascript
vue通过数据过滤实现表格合并
Nov 30 Javascript
JS轮播图的实现方法
Aug 24 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
回首过去10年中最搞笑的10部动漫,哪一部让你节操尽碎?
2020/03/03 日漫
用PHP编程语言开发动态WAP页面
2006/10/09 PHP
在PHP中使用redis
2013/11/04 PHP
PHP获取当前完整URL地址的函数
2014/12/21 PHP
PHP互换两个变量值的方法(不用第三变量)
2016/11/14 PHP
JavaScript.Encode手动解码技巧
2010/07/14 Javascript
jquery tab插件精简版分享
2011/09/10 Javascript
jQuery :first选择器使用介绍
2013/08/09 Javascript
在JS中如何调用JSP中的变量
2014/01/22 Javascript
七个很有意思的PHP函数
2014/05/12 Javascript
JS动态改变表格边框宽度的方法
2015/03/31 Javascript
Angular2 (RC5) 路由与导航详解
2016/09/21 Javascript
关于Vue.js 2.0的Vuex 2.0 你需要更新的知识库
2016/11/30 Javascript
AngularJS之页面跳转Route实例代码
2017/03/10 Javascript
详解Nodejs mongoose
2018/06/10 NodeJs
利用React Router4实现的服务端直出渲染(SSR)
2019/01/07 Javascript
Vue数字输入框组件使用方法详解
2020/02/10 Javascript
[03:36]DOTA2完美大师赛coL战队趣味视频——我演你猜
2017/11/23 DOTA
Python3 正在毁灭 Python的原因分析
2014/11/28 Python
浅谈python装饰器探究与参数的领取
2017/12/01 Python
Python字符串对象实现原理详解
2019/07/01 Python
解决Python3 抓取微信账单信息问题
2019/07/19 Python
详解anaconda安装步骤
2020/11/23 Python
用ldap作为django后端用户登录验证的实现
2020/12/07 Python
CSS3实现翘边的阴影效果的代码示例
2016/06/13 HTML / CSS
html5中地理位置定位api接口开发应用小结
2013/01/04 HTML / CSS
HTML页面中添加Canvas标签示例
2015/01/01 HTML / CSS
公司财务总监岗位职责
2013/12/14 职场文书
幼儿园教师国培感言
2014/02/02 职场文书
工作违纪检讨书
2014/02/17 职场文书
中学生检讨书范文
2014/11/03 职场文书
护士求职简历自我评价
2015/03/10 职场文书
2016教师国培研修感言
2015/12/08 职场文书
创业计划书之都市休闲农庄
2019/12/28 职场文书
详解MySQL InnoDB存储引擎的内存管理
2021/04/08 MySQL
古见同学有交流障碍症 第二季宣传CM公开播出
2022/04/11 日漫