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

Question

我试图只显示插入记录成功模式弹出在 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" />

标签： jqueryajaxpopupbootstrap-modalasp.net-ajax

Answer 1

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

HIH

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