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