扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框

 更新时间:2017年02月21日 15:10:36   作者:Sunking_Yin  
这篇文章主要介绍了扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框,需要的朋友可以参考下

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框,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • js实现延迟加载的几种方法详解

    js实现延迟加载的几种方法详解

    今天小编就为大家分享一篇关于js实现延迟加载的几种方法详解,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2019-01-01
  • TypeScript类型推论与类型断言实例详解

    TypeScript类型推论与类型断言实例详解

    如果没有明确的指定类型,那么TypeScript会依照类型推论(Type Inference)的规则推断出一个类型,下面这篇文章主要给大家介绍了关于TypeScript类型推论与类型断言的相关资料,需要的朋友可以参考下
    2022-11-11
  • javascript开发随笔二 动态加载js和文件

    javascript开发随笔二 动态加载js和文件

    js无非就是script标签引入页面,但当项目越来越大的时候,单页面引入N个js显然不行,合并为单个文件减少了请求数,但请求的文件体积却很大
    2011-11-11
  • JavaScript实现伸缩二级菜单

    JavaScript实现伸缩二级菜单

    这篇文章主要为大家详细介绍了JavaScript实现伸缩二级菜单,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-10-10
  • 原生JS实现拖拽照片墙

    原生JS实现拖拽照片墙

    这篇文章主要为大家详细介绍了原生JS实现拖拽照片墙,实现照片互换位置,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-10-10
  • 轻松搞定js表单验证

    轻松搞定js表单验证

    不用一行代码和一句提示语就搞定整个表单验证,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-10-10
  • JavaScript实现旋转图像的三种方法介绍

    JavaScript实现旋转图像的三种方法介绍

    在文档扫描Web应用中,我们需要旋转倾斜的或扫描方向错误的文档图像,这篇文章主要为大家整理了使用JavaScript旋转图像的三种方法,希望对大家有所帮助
    2024-01-01
  • 纯javascript制作日历控件

    纯javascript制作日历控件

    本文给大家分享的是使用纯javascript实现的日历控件的代码,笔者也是第一次写控件,摸索着前行,
    2015-07-07
  • 微信小程序如何访问公众号文章

    微信小程序如何访问公众号文章

    这篇文章主要介绍了微信小程序如何访问公众号文章,随着小程序不断的发展,现在个人的小程序也开放了很多功能了,个人小程序直接打开公众号链接。在群里看到的一款小程序,点击可以直接阅读文章了,需要的朋友可以参考下
    2019-07-07
  • Array的push与unshift方法性能比较分析

    Array的push与unshift方法性能比较分析

    Array的push与unshift方法都能给当前数组添加元素,不同的是,push是在末尾添加,而unshift则是在开头添加。
    2011-03-03

最新评论