如何将模型对话框放置在中心？

Question

I am new to mvc and im implimenting a small software in mvc. 我是mvc的新手，并且在mvc中暗示了一个小型软件。 i used an online tutorial to model a view with model popup from a partial view. 我使用了一个在线教程，从局部视图中使用模型弹出窗口对视图进行建模。 but the popups always appear to the right. 但是弹出窗口始终显示在右侧。 i have tried many samples given here also it only change bit. 我试过这里给出的许多样本，它也只是改变位。 inherit is affects more than absolute key word. 继承不仅影响绝对关键字。 im using bootstrap 3 templete which has a left side menu bar. 即时通讯使用带有左侧菜单栏的bootstrap 3 templete。

do we have to set position of the div also ? 我们还必须设置div的位置吗？ do i have to insert some css to partial view ? 我必须在局部视图中插入一些CSS吗？ is there any way we can easitly correct these view related things other than testing example codes? 除了测试示例代码之外，还有什么方法可以轻松地纠正这些与视图相关的问题？ why the model position not comming to the middle ? 为什么模型位置不在中间？

Thank a lot in advance. 在此先多谢。

 <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 mb-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> }

Answer 1

Add left, top, and transform to your modal. 添加左侧，顶部并转换为模态。

       .modal {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 10040;
        overflow: auto;
        overflow-y: auto;
    }

如何将模型对话框放置在中心？

问题描述

1 个解决方案

解决方案1
0 已采纳 2018-04-25 06:36:18

如何将模型对话框放置在中心？

问题描述

1 个解决方案

解决方案1 0 已采纳 2018-04-25 06:36:18

解决方案1
0 已采纳 2018-04-25 06:36:18