ASP.NET Modal Popup 只显示灰色页面答案

【问题标题】：ASP.NET Modal Popup only displays grayed out pageASP.NET Modal Popup 只显示灰色页面
【发布时间】：2016-07-10 23:08:51
【问题描述】：

编辑：link to error pic

我是 ASP.NET 的新手，我无法让 Modal Popup 工作，我认为这与在 _Layout 中包含正确的脚本有关，但经过大量搜索后，我找不到比灰色更多的方法覆盖在视图上。

_布局

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"/>
      @Styles.Render("~/Content/css")
      @Scripts.Render("~/bundles/modernizr")
      @Scripts.Render("~/bundles/jquery")
<script src="~/Scripts/jquery-ui-1.11.4.min.js"></script>
      @Scripts.Render("~/bundles/jqueryajax") ;
      @Scripts.Render("~/bundles/bootstrap")
</head>
<body>
<div class="container body-content">
 @RenderBody()
 @RenderSection("scripts", required: false)
</div>

索引

<div id="modal1" class='modal fade in'>
<div id="modal2">
</div>
</div>
 <input type="button" id="btn" value="Click to popup"/>
 <script type="text/javascript">
$(document).ready(function () {
    $("#btn").click(function () {
        $.ajax({
            cache: false,
            url: '@Url.Action("Modal")',
            success: function (data) {
                $("#modal2").html(data);
                $("#modal1").modal('show');
            }
        });
    });
});

【问题讨论】：

首先要按 F12 并检查控制台选项卡是否存在 javascript 错误，以及网络选项卡是否存在 ajax 发布错误
我收到 no element found 错误，我不确定是 js 错误还是 ajax 错误
在控制台中吗？它旁边是否列出了 .js 文件？我不确定这是否是故意的，但你有嵌套的 div - 这是故意的吗？我以前从未使用过这样的 jquery ui 模态。我建议你从一个更简单的实现开始并开始工作 - 只使用一个 div 和一个 modal
我不确定 @Url 是否在 javascript 中工作——我认为是剃须刀
参考这个（当我搜索你的错误时第一次点击）stackoverflow.com/questions/7386078/…这是一个javascript错误。您需要检查代表您的 HTTP 调用的网络选项卡，并查看您的 url @Url.Action("Modal") 是否按预期工作 - 它是否被调用并且是否返回数据？

标签： jquery asp.net ajax modalpopup

【解决方案1】：

（通过数据属性）：

无需编写 JavaScript 即可激活模式。在控制器元素（如按钮）上设置 data-toggle="modal" 以及 data-target="#foo" 或 href="#foo" 以针对特定模式进行切换。

你可以试试这个

<!-- Button trigger modal -->

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">show my modal </button>

        <!-- Modal -->
         <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">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
        </div>
      <div class="modal-body">This is my content</div>
      <div class="modal-footer">
           <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
           <button type="button" class="btn btn-primary">Save changes</button>
       </div>
      </div>
   </div>
   </div>
  <!-- /.modal -->

通过 JavaScript

使用单行 JavaScript 调用 id 为 myModal 的模式：

   $('#myModal').modal(options)

【讨论】：

这确实有效！我从来没有这么接近过。在您的代码示例中，您包含两个按钮，显然这两个按钮都不需要。现在，我可以完成相同的模态弹出窗口，myModal 在不同的视图中，可以从控制器调用，并填充强类型模型吗？

【解决方案2】：

您的模态弹出窗口的 HTML 看起来不正确。请查看下面的引导模态弹出窗口的外观以及使用 jQuery 显示它的示例：

<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
    <script type="text/javascript">
        $(function () {
            $("#btn").click(function () {
                var data = "Some test data...";
                $(".modal-body").html(data);
                $("#modal1").modal('show');
            });
        });
    </script>
</head>
<body>
    <input type="button" id="btn" value="click" />
    <!--Modal start-->
    <div id="modal1" class="modal fade">
        <div class="modal-dialog">
            <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">Modal popup</h4>
                </div>
                <div class="modal-body">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal end-->
</body>

输出：

【讨论】：