最近在写一个页面，整个网站都是使用bootstrap写成的，在这个里面需要调用bootstrap的模态框组件。
这个页面是一个类型表格的页面，所以需要弹出的模态框能够根据参数的不同来访问制定的页面并把页面信息写入模态框内，所以需要在打开模态框的同事根据启动模态框的按钮url参数来访问不同的页面。弹出的模态框里的内容就是给出的url指向页面的内容。

现在出现的问题：点击启动模态框后会出现页面整体左移的现象，
同时在触发某个模态框之后无法再触发其他的模态框了，甚至bootstrap的一些其他组件也失效了。
每次在触发这个模态框之后模态框外页面背景的颜色也越来越黑。

这是modal的html代码

 <div class="btn-group">
    <a href="#modal" data-toggle="modal" data-url="<%=basePath%>/userManager/userInfo.do?id=${user.user_id}" class="btn btn-default btn-sm">查看</a>
    <a href="#" type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      <li>
        <a href="#modal" data-toggle="modal" data-url="<%=basePath%>/userManager/userInfoEdit.do?id=${user.user_id}">编辑用户信息</a>
      </li>

      <li>
        <a href="#modal" data-toggle="modal" data-url="<%=basePath%>/userManager/userRolesEdit.do?id=${user.user_id}&roles=${user.roles}">设置用户组</a>
      </li>

      <li>
        <a href="#modal" data-toggle="modal" data-url="<%=basePath%>/userManager/getUserAvatar.do?id=${user.user_id}">修改用户头像</a>
      </li>

      <li>
        <a href="#modal" data-toggle="modal" data-url="<%=basePath%>/userManager/userPasswordAlter.do?id=${user.user_id}&nickname=${user.nickname}&email=${user.email}">修改密码</a>
      </li>
  </ul>
              </div>

modal的div

 <div id="modal" class="modal fade">
</div>

触发modal的方法

 $(function(){
    $('#modal').on('show.bs.modal', function (event) {
            $("body").css('padding-right','0px');
            var button = $(event.relatedTarget);
            var url = button.data('url');
            $(this).load(url);
    })

    $("#modal").on('hidden.bs.modal', function (event) {
        $(this).empty()
    })
})

同时在每次启动模态框后 chrome的控制台会报错

 Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check http://xhr.spec.whatwg.org/.

jQuery版本 1.11.3
bootstrap版本 3.3.4