模态弹出窗口不起作用答案

【问题标题】：Modal Pop up doesn't work模态弹出窗口不起作用
【发布时间】：2016-10-29 02:15:23
【问题描述】：

我继承了一个需要增强的带有 Razor 的 ASP.Net WebPages 项目。在发布时，我需要检查用户是否填写了问卷，如果没有，则弹出一个对话框，告诉他们在将他们重定向到问卷页面之前完成它。条件检查和 Reponse.Redirect 一样有效。我从here 得到的弹出代码没有。有任何想法吗。代码如下：

在文档的头部，我有这个：

<link href="~/Content/jquery-ui-1.12.1.css"  rel="stylesheet" type="text/css" >
<script src="~/Scripts/jquery-1.12.4.js"></script>
<script src="~/Scripts/jquery-ui-1.12.1.js"></script>

在体内：

if (IsPost && !questionnaireCompleted)  // this works
{
<div id="dialog" title="Incomplete Questionnaire">
    <p>You must complete the questionnaire before you can save!</p>
</div>

<script type="text/javascript">
    $(function () {
        $("#dialog").dialog();
    });
</script>

    Response.Redirect("~/Sections/Questionnaire?id=" + id); // this works
}

【问题讨论】：

对不起，这似乎令人困惑。您似乎正在尝试根据条件向页面输出一些标记，但随后立即重定向到另一个页面，而不是使用新标记返回当前页面。您希望它如何工作？
我要做的是通知用户他们需要在另一个页面上进行更改，然后再将他们重定向到那里进行所述更改。我会留给他们在他们完成后导航回到这里。
但这不是代码所做的。同样，这只是服务器端，因此您将立即重定向。您可能想要做的是删除此 response.redirect，使用脚本返回标记，然后在客户端显示弹出窗口并在那里进行重定向
感谢您的耐心等待，Andrei，但我不明白该怎么做。我是一名 C# 后端人员，被卷入其中。

标签： javascript jquery razor asp.net-webpages

【解决方案1】：

您可能需要切换 div 标签和 script 标签，因为脚本/函数在实际模态之前加载。

【讨论】：

【解决方案2】：

您是否包括这些脚本和 css：

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

【讨论】：

我在本地复制了最后两个js文件，并添加了第一个css。我在项目的任何地方都没有看到 style.css。

【解决方案3】：

使用辅助函数得到它：

@helper SectionCheck( string id )
{
<div>
    <div id="dialog" title="Incomplete MRB Form" data-param="@id">
        <p>You must complete the questionnaire before you can save!</p>
    </div>

    <script type="text/javascript">
        $(function () {
            var ID = document.getElementById('dialog').getAttribute(['data-param']);
            $("#dialog").dialog({
                modal: true,
                buttons: {
                    "OK": function () {
                        $(this).dialog("close");
                        window.location = "MRB?id=" + ID;
                    }
                }
            });
        });
    </script>
</div>
}

【讨论】：