Question

我想在第一次加载网站时使用jQuery Dialog弹出窗口。但它目前尚未开放。

以下是代码：

_layout： -

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Content/css")
    <link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" />
    @Styles.Render("~/bundles/jquery")
    <script src="~/Scripts/jquery-ui-1.8.24.js"></script>
    @Scripts.Render("~/bundles/modernizr")
    <script>
        $(function () {
            alert("hi")
            $("#dialog-modal").dialog({
              height:140,modal:true
            })
        });
    </script>
</head>
<body>
    @RenderBody()
    @RenderSection("scripts", required: false)
</body>
</html>

索引视图： -

<h2>Index</h2>
<div id="dialog-modal" title="basic Title Modal">
    <p>This is A Test Modal</p>
</div>

Answer 1

我会检查jquery js文件是否正在加载好，因为你有这两个：

@Styles.Render("~/bundles/jquery")
<script src="~/Scripts/jquery-ui-1.8.24.js"></script>

我会通过检查layout.cs和bundles配置来检查布局页面是否正在加载包。还要确保它是jquery的正确版本。

作为旁注，如果可以的话，最好使用layout.cshtml并以这种方式加载脚本而不是硬编码版本号 - 例如。

    @Scripts.Render("~/bundles/jquery")

然后在bundle.config

中

public static void RegisterBundles(BundleCollection bundles)

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
   "~/Scripts/jquery-{version}.js"));

Answer 2

您遇到的问题是因为您在加载jquery之前在正文中渲染脚本

这个案例有2个解决方案

1-在标题

中加载jquery

示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Content/css")
    @Styles.Render("~/Content/themes/base/css")
    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/bundles/jquery")
</head>
<body>
    @RenderBody()

    @Scripts.Render("~/bundles/jqueryui")
    @RenderSection("scripts", required: false)
</body>
</html>

index.cshtml

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>
<div id="dialog" title="basic Title Modal">
    <p>This is A Test Modal</p>
</div>
<script>
    $(function () {
        $("#dialog").dialog();
    });
</script>

2-将脚本添加到＆＃34;脚本＆＃34;

部分

例如： _layout.cshtml

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Content/css")
    @Styles.Render("~/Content/themes/base/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    @RenderBody()

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/jqueryui")
    @RenderSection("scripts", required: false)
</body>
</html>

index.cshtml

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>
<div id="dialog" title="basic Title Modal">
    <p>This is A Test Modal</p>
</div>
@section scripts{
    <script>
        $(function () {
            $("#dialog").dialog();
        });
    </script>
}

Answer 3

如果要在DOM准备就绪后加载它，则需要将其包装在文档就绪函数中。

$( document ).ready(function() {
            alert("hi");
            $("#dialog-modal").dialog({
              height:140,modal:true
            });
});

我不确定你是否需要同时使用jQuery和jQueryUI脚本，@RenderSection("scripts", required: false)我不确定它的作用但是如果加载脚本，最好不要让它们堆积在里面身体标签。

无法在Mvc中打开Popup

3 个答案: