我正在使用 Bootstrap Modal 处理两件不同的事情。第一种是从 MVC 局部 View 动态加载它们。那部分似乎在工作。现在我试图让模式在页面上居中。
我正在研究这个例子，但似乎无法让它发挥作用。 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>
Controller
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">
</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>
编辑:我应该在最初的帖子中提到模态框仅显示在页面顶部并达到 100% 宽度。
最佳答案
嗯，我注意到(我认为是)您的代码中有一个相当简单的错误:
dialog = modal.find('.modal-container');
查找 CLASS 为“modal-container”的任何元素。
但是，在您的代码片段中，您将 div 的 ID 设置为“modal-container”，而不是 CLASS。
所以上面那行代码没有找到你想要的 div。事实上，我认为它没有找到任何元素(因为没有任何元素属于“modal-container”类)。
所以也许可以将其更改为:
<div class="modal fade modal-container" role="dialog">
<div class="modal-content">
</div>
</div>
或保持 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');
关于javascript - 无法让 Bootstrap Modal 以某些 JavaScript 为中心，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39211548/