同一页面中的Bootstrap模型对话不起作用

时间:2018-12-18 06:01:06

标签: javascript jquery html css bootstrap-modal

我有一个带有jQuery数据表的Bootstrap 3模型对话。如果第一个打开和关闭第二个,则只有背景消失而没有对话并冻结。即使单击鼠标也不起作用。

我的动作链接

  @Html.ActionLink("Get File ", "_ViewFIles", "POPM_Trn_Job", null, new { @class = "modal-link btn btn-success" })
  @Html.ActionLink("Get Shared ", "GetSharedWithMe", "POPM_Trn_Job", null, new { @class = "modal-link2 btn btn-success" })

我的对话框

<div id="modal-container" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-content">
</div>


<div id="modal-container-Share" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-content">
    </div>
</div>

第一个我的jQuery

                   $(function () {

                   $('body').on('click', '.modal-link', function (e) {
                        e.preventDefault();
                        $(this).attr('data-target', '#modal-container');
                        $(this).attr('data-toggle', 'modal');

                  });


                  $('body').on('click', '.modal-close-btn', function () {
                        $('#modal-container').modal('hide');
                    });


                $('#modal-container').on('hidden.bs.modal', function () {
                $(this).removeData('bs.modal');
                });

                 $('#CancelModal').on('click', function () {
                        return false;
                    });
                });

第二个功能

                ` $(function () {
                 $('body').on('click', '.modal-link2', function (e) {
                 e.preventDefault();
                 $(this).attr('data-target', '#modal-container-Share');
                 $(this).attr('data-toggle', 'modal');

                 });

                 $('body').on('click', '.modal-close-btn', function () {
                 $('#modal-container-Share').modal('hide');
                 });

   $('#modal-container-Share').on('hidden.bs.modal', function () {
                  $(this).removeData('bs.modal');
                  });

                  $('#CancelModal').on('click', function () {
                  return false;
                  });
                });

我做错了什么?

1 个答案:

答案 0 :(得分:0)

我解决了这个问题。我的脚本文档部分填充了三个jQuery参考。删除它们解决了该问题。我猜是因为每个局部视图都带有引用,而主页也有一个引用,因为每个视图都必须使用jQuery数据表。