无法让 Bootstrap Modal 以一些 JavaScript 为中心

Question

我正在使用 Bootstrap Modal 处理两个不同的事情。第一个是从 MVC 局部视图动态加载它们。那部分似乎正在工作。现在我试图让模态在页面上居中。

我正在处理这个示例，但似乎无法让它工作。 https://www.abeautifulsite.net/vertically-centering-bootstrap-modals

我将 JavaScript 中对话框 ID 的名称更改为“.modal-container”，以便它可以找到我的模态。除此之外，我没有看到其他任何我需要改变的地方。我查看了 F12 开发工具，没有发现任何错误。

索引.cshtml

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="~/Content/Site.css" rel="stylesheet" />
</head>
<body>
    <div> 
        <div class="container">
            @Html.ActionLink("Test Modal ", "TestModal", "Test", null, new { @class = "modal-link btn btn-warning" })
        </div>
    </div>

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

    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script src="~/Scripts/bootstrap.min.js"></script>
    <script src="~/Scripts/modernizr-2.6.2.js"></script>

    <script type="text/javascript">

        //****  Bootstrap Modal - used with Partial Views  ***********************
        $(function () {
            // Attach modal-container bootstrap attributes to links with .modal-link class.
            // when a link is clicked with these attributes, bootstrap will display the href content in a modal dialog.
            $('body').on('click', '.modal-link', function (e) {
                e.preventDefault();
                $(this).attr('data-target', '#modal-container');
                $(this).attr('data-toggle', 'modal');
            });

            // Attach listener to .modal-close-btn's so that when the button is pressed the modal dialog disappears
            $('body').on('click', '.modal-close-btn', function () {
                $('#modal-container').modal('hide');
            });

            //clear modal cache, so that new content can be loaded
            $('#modal-container').on('hidden.bs.modal', function () {
                $(this).removeData('bs.modal');
            });

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

        /**
        * Vertically center Bootstrap 3 modals so they aren't always stuck at the top
        */
        $(function () {

            function reposition() {

                var modal = $(this),
                    dialog = modal.find('.modal-container');

                modal.css('display', 'block');

                // Dividing by two centers the modal exactly, but dividing by three 
                // or four works better for larger screens.
                dialog.css("margin-top", Math.max(0, ($(window).height() - dialog.height()) / 2));

            }

            // Reposition when a modal is shown
            $('.modal').on('show.bs.modal', reposition);

            // Reposition when the window is resized
            $(window).on('resize', function () {
                $('.modal:visible').each(reposition);
            });

        });
    </script>

</body>
</html>

控制器

public class TestController : Controller
    {
        // GET: Test
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult TestModal()
        {
            return PartialView("_TestModal");
        }
    }

_TestModal.cshtml

<div class="modal-body">
    <h4>
        Are you sure you want to delete this cost center from all clocks in the  group?
    </h4>

    @using (Html.BeginForm("Lyubomir", "Home", FormMethod.Post))
    {
        <div class="row">
            &nbsp;
        </div>
        <div class="row">
            <div class="col-md-4 col-md-offset-4">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <button type="submit" id="approve-btn" class="btn btn-danger">Save</button>
            </div>
        </div>
    }
</div>


<script type="text/javascript">
    $(function () {
        $('#approve-btn').click(function () {
            $('#modal-container').modal('hide');
        });
    });
</script>

编辑：我应该在最初的帖子中提到，Modal 仅显示在页面顶部并达到 100% 宽度。

Answer 1

嗯，我注意到（我相信是）你的代码中有一个相当简单的错误：

dialog = modal.find('.modal-container');

查找任何具有“modal-container”类的元素。

但是，在您的代码 sn-p 中，您将 div 的 ID 设置为“modal-container”，而不是 CLASS。

所以上面的那行代码没有找到你想要的 div。事实上，我认为它没有找到任何元素（因为没有“modal-container”类）。

所以也许把它改成这样：

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

OR 保持 HTML 不变，并将 modal.find() 更改为：

dialog = modal.find('#modal-container');

如果有帮助，请告诉我。

---

编辑：

您的模态是全宽的，因为您的 Bootstrap 模态结构已关闭。您缺少一个 div。

这就是你所拥有的：

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

这是您需要的（并且应该可以解决您的问题）：

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

添加一个 'modal-dialog' 类的 div 应该会有所帮助。

哦，将 modal.find() 更改为：

dialog = modal.find('.modal-dialog');