Question

我试图在我的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>

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

Answer 1

你的麻烦在这里：

    $('#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")');

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

Answer 2

 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

Bootstrap Modal只显示一次

2 个答案: