弹出模型不会弹出,变成黑屏

时间:2016-03-28 11:00:42

标签: javascript jquery asp.net-ajax bootstrap-modal

这是我获取所选项目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>

它没有出现,因为弹出它带有黑屏

2 个答案:

答案 0 :(得分:0)

发生错误是因为modal div没有必需的包含元素。 .modal-header类的div应该被包含.model-content的div和包含.model-dialog

的div包围

一个简单的解决方法:

<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>

答案 1 :(得分:0)

<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');
                }
            });