1
부트 스트랩 모달로 두 가지 작업을하고 있습니다. 첫 번째는 MVC 부분 뷰에서 다이나믹하게로드하는 것입니다. 그 부분이 효과가있는 것 같습니다. 이제 저는 Modal을 페이지 중앙에 놓으려고합니다.일부 자바 스크립트로 부트 스트랩 모달을 가운데로 가져올 수 없습니다.
이 예제를 사용하고 있지만 작동하지 않는 것 같습니다. https://www.abeautifulsite.net/vertically-centering-bootstrap-modals
JavaScript의 대화 ID 이름을 ".modal-container"로 변경하여 모달을 찾아야합니다. 그 외에는 내가 바꿀 필요가있는 다른 것이 보이지 않습니다. 필자는 F12 Dev Tools를 살펴 보았지만 오류는 보이지 않습니다.
Index.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">
</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');
이 modal- '의 클래스와 모든 요소를 찾습니다
센터? 아니면 수평으로? (자동으로 수평 중심에 놓여 야합니다 ...) 그리고 수직적이면 브라우저 뷰포트에서 의미합니까? –
죄송합니다. 분명히해야합니다. 내 게시물을 업데이트했습니다. – Caverman