javascript - 如何将模型对话框定位到中心？
问题描述
我是 mvc 的新手，我在 mvc 中实现了一个小软件。我使用在线教程对视图建模，并从局部视图中弹出模型弹出窗口。但弹出窗口总是出现在右边。我已经尝试了很多这里给出的样本，它也只是改变了一点。继承影响的不仅仅是绝对关键字。我正在使用具有左侧菜单栏的 bootstrap 3 模板。
我们还必须设置 div 的位置吗？我必须在部分视图中插入一些 CSS 吗？除了测试示例代码之外，我们有什么方法可以轻松纠正这些与视图相关的事情？为什么模特的位置没有到中间？
提前非常感谢。
<link href="@Url.Content("~/Content/themes/base/jquery-ui.css")" rel="stylesheet" type="text/css" media="all" />
<head>
<style src="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css"></style>
<style src="https://cdn.datatables.net/select/1.2.5/css/select.dataTables.min.css"></style>
<style src="https://cdn.datatables.net/responsive/2.2.1/css/responsive.dataTables.min.css"></style>
<style>
.modal {
position: absolute;
top: 10px;
right: 100px;
bottom: 0;
left:200px;
z-index: 10040;
overflow: auto;
overflow-y: auto;
}
</style>
</head>
<h2>Index</h2>
<p>
@Html.ActionLink("Create New", "Create")
</p>
< <div class="panel panel-default m-b-0">
<div class="form">
<div class="row">
<div class="col-md-12">
<div class="panel panel-primary list-panel" id="list-panel">
<div class="panel-heading list-panel-heading">
<h1 class="panel-title list-panel-title">Assets</h1>
<button type="button" class="btn btn-default btn-md" data-toggle="modal" data-target="#advancedSearchModal" id="advancedsearch-button">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span> Advanced Search
</button>
<button type="button" class="btn btn-default btn-md" data-toggle="modal" data-url="@Url.Action("Create","POPM_Trn_IOU")" id="btnCreateAsset">
<span class="glyphicon glyphicon-new-window" aria-hidden="true"></span> Add Asset
</button>
</div>
<div class="panel-body">
<table id="assets-data-table" class="table table-striped table-bordered" style="width:100%;"></table>
</div>
</div>
</div>
</div>
<div class="modal fade" id="createAssetModal" tabindex="-1" role="dialog" aria-labelledby="CreateAssetModal" aria-hidden="true" data-backdrop="static">
<div id="createAssetContainer">
</div>
</div>
<div class="modal fade" id="editAssetModal" tabindex="-1" role="dialog" aria-labelledby="EditAssetModal" aria-hidden="true" data-backdrop="static">
<div id="editAssetContainer">
</div>
</div>
<div class="modal fade" id="detailsAssetModal" tabindex="-1" role="dialog" aria-labelledby="DetailsAssetModal" aria-hidden="true" data-backdrop="static">
<div id="detailsAssetContainer">
</div>
</div>
<div class="modal fade" id="deleteAssetModal" tabindex="-1" role="dialog" aria-labelledby="DeleteAssetModal" aria-hidden="true" data-backdrop="static">
<div id="deleteAssetContainer">
</div>
</div>
@*@Html.Action("AdvancedSearch")*@
<div class="panel-body">
<table id="assets-data-table" class="table table-striped table-bordered" style="width:100%;"></table>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/fixedcolumns/3.2.4/js/dataTables.fixedColumns.min.js"></script>
<script src="https://cdn.datatables.net/select/1.2.5/js/dataTables.select.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.1/js/dataTables.responsive.min.js"></script>
<script src="https://cdn.datatables.net/keytable/2.3.2/js/dataTables.keyTable.min.js"></script>
@section scripts {
<script type="text/javascript">
var assetListVM;
$(function () {
assetListVM = {
dt: null,
init: function () {
dt = $('#assets-data-table').DataTable({
"serverSide": true,
"processing": true,
"ajax": {
"url": "@Url.Action("Index", "POPM_Trn_IOU")",
"data": function (data) {
data.FacilitySite = $("#FacilitySite").val();
data.Building = $("#Building").val();
data.Manufacturer = $("#Manufacturer").val();
data.Status = $("#Status").val();
}
},
"columns": [
{ "title": "S/N", "data": "BarCode", "searchable": true },
{ "title": "Code", "data": "Manufacturer", "searchable": true },
{ "title": "Description", "data": "ModelNumber", "searchable": true },
{ "title": "Requested Amount", "data": "Building", "searchable": true },
{ "title": "Expandable Amount", "data": "RoomNo" },
{ "title": "Balance Amount", "data": "Quantity" },
{ "title": "Total Expences", "data": "Quantity" },
{ "title": "Remarks", "data": "Quantity" },
{
"title": "Actions",
"data": "AssetID",
"searchable": false,
"sortable": false,
"render": function (data, type, full, meta) {
return '<a href="@Url.Action("Edit", "POPM_Trn_IOU")?id=' + data + '" class="editAsset">Edit</a> | <a href="@Url.Action("Details", "POPM_Trn_IOU")?id=' + data + '" class="detailsAsset">Details</a> | <a href="@Url.Action("Delete", "POPM_Trn_IOU")?id=' + data + '" class="deleteAsset">Delete</a>';
}
}
],
"lengthMenu": [[10, 25, 50, 100], [10, 25, 50, 100]],
});
},
refresh: function () {
dt.ajax.reload();
}
}
// Advanced Search Modal Search button click handler
$('#btnPerformAdvancedSearch').on("click", assetListVM.refresh);
// initialize the datatables
assetListVM.init();
$("#btnCreateAsset").on("click", function () {
var url = $(this).data("url");
$.get(url, function (data) {
$('#createAssetContainer').html(data);
$('#createAssetModal').modal('show');
});
});
$('#assets-data-table').on("click", ".editAsset", function (event) {
event.preventDefault();
var url = $(this).attr("href");
$.get(url, function (data) {
$('#editAssetContainer').html(data);
$('#editAssetModal').modal('show');
});
});
$('#assets-data-table').on("click", ".detailsAsset", function (event) {
event.preventDefault();
var url = $(this).attr("href");
$.get(url, function (data) {
$('#detailsAssetContainer').html(data);
$('#detailsAssetModal').modal('show');
});
});
$('#assets-data-table').on("click", ".deleteAsset", function (event) {
event.preventDefault();
var url = $(this).attr("href");
$.get(url, function (data) {
$('#deleteAssetContainer').html(data);
$('#deleteAssetModal').modal('show');
});
});
});
/**** Create Asset Ajax Form CallBack ********/
function CreateAssetSuccess(data) {
if (data != "success") {
$('#createAssetContainer').html(data);
return;
}
$('#createAssetModal').modal('hide');
$('#createAssetContainer').html("");
assetListVM.refresh();
}
/**** Edit Asset Ajax Form CallBack ********/
function UpdateAssetSuccess(data) {
if (data != "success") {
$('#editAssetContainer').html(data);
return;
}
$('#editAssetModal').modal('hide');
$('#editAssetContainer').html("");
assetListVM.refresh();
}
/**** Delet Asset Ajax Form CallBack ********/
function DeleteAssetSuccess(data) {
if (data != "success") {
$('#deleteAssetContainer').html(data);
return;
}
$('#deleteAssetModal').modal('hide');
$('#deleteAssetContainer').html("");
assetListVM.refresh();
}
</script>
}解决方案
将左、上和变换添加到您的模态。
.modal {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 10040;
overflow: auto;
overflow-y: auto;
}
推荐阅读
- javascript - 使用javascript从字符串数组创建一个json
- node.js - 当字符串作为参数传递时，ElasticSearch 2.3 geo_point 字段会引发错误
- java - 引起：java.lang.ClassNotFoundException：org.apache.hbase.thirdparty.com.google.common.cache.CacheLoader
- node.js - 如何防止 $lookup 在 Mongodb 中返回重复值？
- python - python __repr__(self)：不返回
- pandas - 如何将组内的 cumsum 反转到带有熊猫的特定行？
- c - 函数只返回不应该达到的返回值
- nginx - 如何在暴露内部域的 NGINX 上运行的 Pagespeed 上进行域重写/映射？
- android - Jetpack compose 中 AlertDialog 的 setOnKeyListener
- r - 如何在多个可能的组合中找到具有最高方差的子集？