Ajax 成功刷新（如阴影）中的 Bootstrap 模态弹出窗口比消失 MVC答案

【问题标题】：Bootstrap Modal pop-up in Ajax success flush (like shadow) than disappear MVCAjax 成功刷新（如阴影）中的 Bootstrap 模态弹出窗口比消失 MVC
【发布时间】：2020-04-05 10:08:15
【问题描述】：

我正在尝试仅显示插入记录成功模式弹出在 ajax 成功内它尝试像阴影效果一样出现在屏幕上，但什么都没有消失。

我的模态是，

<!--Modal PopUp-->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header alert alert-success">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="myModalLabel">@Resource.InfromationDialog</h4>
                </div>
                <div class="modal-body">
                    <p class="success-message">@Resource.PrompSuccess </p>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-success delete-confirm">@Resource.Ok</button>
                    @*<button class="btn btn-default" data-dismiss="modal">@Resource.Cancel</button>*@
                </div>
            </div>
        </div>
    </div>

这是我的 ajax，

   $("#create").click(function(e){  
    var myModel =
                {
                    "TribeName": $('#TribeName').val()
                };

var jsonToPost = JSON.stringify(myModel);
$.ajax({
    url: '/Home/Create/',
    async: true,
    processData: false,
    data: jsonToPost,
    type: 'post',
    contentType: 'application/json; charset=utf-8',
    success: function (data) {
        if (data == true) {
            $('#myModal').modal('show');
        }

    },
    error: function (err) {
        alert('error');

    }
});
})

为什么它只是闪烁的阴影而不是消失它没有显示弹出

已编辑：

这里是#create，

<input type="submit" id="create"  value="@Resource.Create" class="btn btn-primary" />

【问题讨论】：

#create在哪里？
@Scaramouche 我编辑了我的帖子#create is button id
我刚刚尝试了代码，模式工作正常。我显然无法尝试您的 ajax 调用，因为我无权访问您的服务器，但您可以这样做：确保将 stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/… 用于 JS，将 stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/… 用于 CSS，将 console.log(data) 放在成功回调中以确保数据是真实的。
@Scaramouche 如果我在没有 ajax 的情况下使用模态，它在 ajax 内工作，它正在刷新并且它正在成功，我通过警报数据检查。我真的不知道为什么会这样:(

标签： jquery ajax popup bootstrap-modal asp.net-ajax

【解决方案1】：

好吧，由于我无权访问您的服务器，因此我将模拟此示例的 ajax 调用。

嗨

$("#create").click(function(e){ 

var myModel = {
  "TribeName": $('#TribeName').val()
};

var jsonToPost = JSON.stringify(myModel);
console.log('Sending post request...')
$.ajax({
    url: 'https://jsonplaceholder.typicode.com/posts',
    async: true,
    processData: false,
    data: jsonToPost,
    type: 'post',
    contentType: 'application/json; charset=utf-8',
    success: function (data) {
        console.log(data)
    //in this case data is {"id": 101}, so I have to modify the IF a bit
        //if (data == true) {
        if (data.id == 101) {
            $('#myModal').modal('show');
        }
    },
    error: function (err) {
        console.log('error', err.status);
    }
});
});

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>

<input type="submit" id="create"  value="@Resource.Create" class="btn btn-primary" />


<!--Modal PopUp-->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header alert alert-success">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="myModalLabel">@Resource.InfromationDialog</h4>
                </div>
                <div class="modal-body">
                    <p class="success-message">@Resource.PrompSuccess </p>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-success delete-confirm">@Resource.Ok</button>
                    @*<button class="btn btn-default" data-dismiss="modal">@Resource.Cancel</button>*@
                </div>
            </div>
        </div>
    </div>

【讨论】：