一聚教程网:一个值得你收藏的教程网站

最新下载

热门教程

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

时间:2017-04-21 编辑:简简单单 来源:一聚教程网

js代码

 

 代码如下 复制代码

functioninitView(_box){

  var$p = $(_box || document);

  $('a[target="dialog"]', $p).each(function(event){

    $(this, $p).unbind('click').click(function(event){

      openModal(event);

    });

  });

}

$(function(){

  initView();

});

/**关闭modal*/

functionhideModal(obj){

  varmodal = $(obj).parents("div.modal");

  if(modal.length > 0){

    modal.remove();

    initView();

  }

}

/**打开modal*/

functionopenModal(event){

// var this = $(this);

  var$this= $(event.currentTarget);

  var_url = $this.attr("href");

  var_title = $this.attr("title");

  var_id;

  _id = dialog.content();

  varoptions = {

      backdrop:false,

      keyboard:true,

      show:true

  };

  $('#'+ _id).modal(options);

  varmodal = $('#'+ _id);

  if(typeof(_title) !="undefined"){

     if(modal.find('.modal-title').length <= 0){

       varheader = 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);

}

vardialog = {

  header :function(options){

    vartemplate ='

';

    returntemplate;

  },

  content :function(){

    var_modal_id = $(window).data("_modal_id");

    var_id ="_modal_id_"+ _modal_id;

    _modal_id ++;

    $(window).data("_modal_id", _modal_id);

    vartemplate ='

';

    $(template).appendTo('body');

    initView();

    return_id;

  },

  body :'

'

};

//TO END

 

页面代码:

 代码如下 复制代码
target="dialog" title="请选择用餐类型">签到

页面上只要在a标签后加上target="dialog",并且提供href外部链接地址就可以弹出modal框

热门栏目