个人中心
gpt4 book ai didi

javascript - 如何将模型对话框定位到中心？

转载 作者：行者123 更新时间：2023-11-28 01:49:35 24 4
gpt4 key购买 nike

我是 mvc 的新手，我正在用 mvc 实现一个小软件。我使用在线教程从局部 View 中使用模型弹出窗口对 View 进行建模。但弹出窗口总是出现在右边。我已经尝试了这里给出的许多示例，它也只改变了一点。 inherit 不仅仅是 absolute 关键字。我正在使用具有左侧菜单栏的 bootstrap 3 模板。

我们还必须设置 div 的位置吗？我必须插入一些 css 到局部 View 吗？除了测试示例代码之外，有什么方法可以轻松纠正这些与 View 相关的问题吗？为什么模型位置不在中间？

非常感谢。 

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

}

最佳答案

将 left、top 和 transform 添加到您的模式。 

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

关于javascript - 如何将模型对话框定位到中心？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50015382/

24 4 0
文章推荐： c++ - 使用 cin 获取多个带空格的输入
文章推荐： javascript - 将模型的属性渲染为 HTML 页面标题
文章推荐： Javascript:将球保持在圆圈动画内
文章推荐： javascript - 在加载任何 html 元素之前加载图像
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com