弹出模型不弹出，变成黑屏

Question

这是我获取所选项目 ID 的脚本

   $(document).ready(function () {
            $(document).on("click", "#apply", function () {

                var url = window.location.pathname;
                var id = url.substring(url.lastIndexOf('/') + 1);

                    $.ajax({

                        type: 'POST',
                        url: '@Url.Action("Apply", "Event")',
                        data: 'id=' + id,
                        success: function (msg) {

                            $('#test_modal').modal('show');
                            //setTimeout(function () {// wait for 5 secs(2)
                            //    location.reload(); // then reload the page.(3)
                            //}, 1000);
                        }
                    });


            });
        });

这里是模态 div;

<div class="modal fade" id="test_modal">
<div class="modal-header">
    <a class="close" data-dismiss="modal">&times;</a> <h3>Modal Header</h3>
</div>
<div class="modal-body"> <p>Test Alert</p> </div> <div class="modal-footer">
    <a href="#" class="btn" data-dismiss="modal">Close</a>
</div>

它没有弹出它带有黑屏

Answer 1

错误发生是因为 modal div 没有所需的包含元素。 div 和 .modal-header class 应该被 div 和 .model-content 包围，另一个 .model-dialog

一个简单的修复：

<div class="modal fade" id="test_modal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <a class="close" data-dismiss="modal">&times;</a> <h3>Modal Header</h3>
      </div>
      <div class="modal-body">
        <p>Test Alert</p>
      </div>
      <div class="modal-footer">
        <a href="#" class="btn" data-dismiss="modal">Close</a>
      </div>
    </div>
  </div>
</div>

Answer 2

<div class="modal fade" id="test_modal" style="display:none">

将样式添加到模式

$.ajax({

                type: 'POST',
                url: '@Url.Action("Apply", "Event")',
                data: 'id=' + id,
                success: function (msg) {
                    $('#test_modal').modal('show');
                }
            });

弹出模型不弹出，变成黑屏

Pop up Model does not pop up, becomes black screen

javascript

jquery

asp.net-ajax

bootstrap-modal