我是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>
}
答案 0 :(得分：0)
将左侧，顶部和变换添加到模态中。
.modal {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 10040;
overflow: auto;
overflow-y: auto;
}