网站建设资讯

NEWS

网站建设资讯

bootstrap中modal模态框如何实现动态添加modal框和弹出多个modal框

小编给大家分享一下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 = '' 
            +  '×' 
            +  '' + options.title + '' 
            +'
';      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 = ''       +  ''       +   ''       +   '
'       +  '
'       +'
';      $(template).appendTo('body');      initView();      return _id;    },    body : ''  };  //TO END

页面代码:

target="dialog" title="请选择用餐类型">签到

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

以上是“bootstrap中modal模态框如何实现动态添加modal框和弹出多个modal框”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


网页标题:bootstrap中modal模态框如何实现动态添加modal框和弹出多个modal框
转载注明:http://njwzjz.com/article/gppepi.html

其他资讯