Bootstrap动态加载模态框

一、函数（可以放在常用的js文件中外链接)

function myModal(){
  //先保存地址，加载时event.target可能会变化
  var loadURI=$(this).attr('href')?$(this).attr('href'):$(event.target).attr('href');
  if(!$("#myModal").attr('id')){    //防止重复添加
    //动态添加modal框容器
    var obj=$('
');
    obj.appendTo($('body'));
    var obj1=$('
');
    obj1.appendTo($(obj));
    var obj2=$('
');
    obj2.appendTo($(obj1));
  }
  //显示时加载可以避免“百度地图”等定位图标错误的问题
  $("#myModal").on('show.bs.modal', function () {
    //动态加载链接地址
    $('#myModal .modal-content').load(loadURI);
  }).modal().off('show.bs.modal');    //立即注消事件，不然事件会累加形成闪屏
  //隐藏时清除数据，避免缓存等问题引起的时好时坏的问题
  $('#myModal').off('hidden.bs.modal').on("hidden.bs.modal", function() { 
    $('#myModal .modal-content').html('');
    $(this).removeData("bs.modal"); 
  });
  //中断事件执行，避免a等元素点击后跳转到相应页面
  event.preventDefault();   
}

二、用法
方式1：A或button中添加href属性指向需要加载的内容，onclick事件指向myModal如
登录
方式2：A或button中添加href属性指向需要加载的内容，并指定一个特定的类如reModal，然后js中绑定该类的click事件
...
...
...
...

PS：如果被加载的内容中存在jQuery等引用，会导致重载错误产生。