Bootstrap Modal仅显示一次

Bootstrap Modal shown only once

本文关键字：一次 Modal 显示 Bootstrap      更新时间：2023-10-14

我试图在ASP.Net MVC 5项目中使用Bootstrap Modals。我的页面上有两个容器div：

<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="#smallModal" aria-hidden="true">
    </div>
    <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="#smallModal" aria-hidden="true">
    </div>

我填写并显示这些：

function addBandOnClick() {
            var options = {
                "backdrop" : "static",
                "keyboard": "false",
                "show" : "true"
            }
            $('#addModal').load('@Url.Action("Add")');
            $('#addModal').modal(options);
        }
        function editOnClick(Id) {
            var options = {
                "backdrop": "static",
                "keyboard": "false",
                "show": "true"
            }
            var url = 'Home/Edit/' + Id;
            $('#editModal').load(url);
            $('#editModal').modal(options);
        }

所以，点击按钮，我加载所需的布局并将其显示给用户。所有操作都很好，除了模态只显示一次，在我以任何方式关闭模态后，我无法再次访问它，它就是不可见。

这里的代码：

Index.cshtml:

@model IEnumerable<TestShit.Models.MetalBand>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.4/css/jquery.dataTables.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
    <script type="text/javascript" charset="utf8" src="//code.jquery.com/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.4/js/jquery.dataTables.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</head>
<body>
    <div>
        <a onclick="addBandOnClick()" href="#">Add Band</a>
        <table id="table_id" class="display">
            <thead>
                <tr>
                    <th>@Html.DisplayNameFor(model => model.BandName)</th>
                    <th>@Html.DisplayNameFor(model => model.MetalGenre)</th>
                    <th>Actions</th>
                </tr>
            </thead>
        </table>
    </div>
    <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="#smallModal" aria-hidden="true">
    </div>
    <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="#smallModal" aria-hidden="true">
    </div>
    <script>
        var table;
        function addBandOnClick() {
            var options = {
                "backdrop" : "static",
                "keyboard": "false",
                "show" : "true"
            }
            $('#addModal').load('@Url.Action("Add")');
            $('#addModal').modal(options);
        }
        function editOnClick(Id) {
            var options = {
                "backdrop": "static",
                "keyboard": "false",
                "show": "true"
            }
            var url = 'Home/Edit/' + Id;
            $('#editModal').load(url);
            $('#editModal').modal(options);
        }
        $(document).ready(function () {
            table = $('#table_id').DataTable({
                "ajax": '@Url.Action("GetBands", "Home")',
                "columns": [
                    { "data": "BandName" },
                    { "data": "MetalGenre.GenreName" },
                    {
                        mData: null,
                        mRender: function (d, t, r) {
                            var Id = r.ID;
                            var link = '<a style="text-decoration: none" onclick="editOnClick(' + Id + ')" href="#">' +
                                       "<img width='"24'" height='"24'" src='"Content/Images/edit.png'"/></a> |" +
                                       "<a onclick='"deleteBand(" + Id + ")'"><img src='"Content/Images/delete.png'"/></a>";
                            return link;
                        }
                    }
                ]
            });
        });
        $('body').on('hidden.bs.modal', '.modal', function () {
            var parent = $('#modalContainer').parent();
            parent.empty();
            parent.removeAttr('style');
            $(this).removeData('bs.modal');
        });
        function applyModal(btnClicked) {
            var $form = $(btnClicked).parents('form');
            var url = $form.attr('action');
            var data = $form.serialize();
            $.post(url, data, function () {
                table.ajax.reload(null, false);
            });
        }
        function deleteBand(id) {
            $.post("Home/Delete/" + id, function () {
                table.ajax.reload(null, false);
            });
        }
    </script>
</body>
</html>

和AddEdit.cshtml（由Add和Edit/ID操作返回的一个）:

@model TestShit.Models.MetalBand
<div class="modal-dialog modal-sm" id="modalContainer">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel">@ViewBag.Title</h4>
        </div>
        @using (Html.BeginForm())
        {
            <fieldset>
                <div class="modal-body">
                    <div>
                        <p>@Html.DisplayNameFor(model => model.BandName)</p>
                        <p>@Html.EditorFor(model => model.BandName)</p>
                            <p>@Html.DropDownListFor(model => model.MetalGenreID, new SelectList(ViewBag.Genres, "ID", "GenreName"))</p>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button onclick="applyModal(this)" data-dismiss="modal" class="btn btn-primary">@ViewBag.ButtonText</button>
                    </div>
                </fieldset>
            }
        </div>
    </div>

拜托，我真的看不出我做错了什么=（

您的问题在这里：

    $('#addModal').load('@Url.Action("Add")');
    $('#addModal').modal(options);

应该这样做：

$('#addModal').load('@Url.Action("Add")', function () {
                $('#addModal').modal(options);
            });

因为，当你以第一种方式进行时，

$('#addModal').modal(options);

后立即发射

   $('#addModal').load('@Url.Action("Add")');

这会由于这些函数的异步执行而导致问题。正确的方法是使用回调）在这种情况下，系统将等待加载完成，然后它将显示您的模态，祝您好运！

 if (document.cookie.indexOf('modal_shown=') >= 0) {
        //do nothing if modal_shown cookie is present
    }
    else {
        //set cookie modal_shown
        //cookie will expire when browser is closed
        if (imageTitle != "") {
            $('#myModalGallery').modal('show');  //show modal pop up
            document.cookie = 'modal_shown=seen';
        }
        else {
            $('#myModalGallery').modal('hide');
        }
    }
this will help u dear it is working fine for me
相关文章：