Question

所以我想尝试使用jQuery弹出模式弹出一个对话框在_Layout视图中，我收取了所需的所有脚本

  @Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryui")
@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/bundles/modernizr")
<link href="~/Content/jquery-ui.min.css" rel="stylesheet">
<script>
    $(function () {
        $("#dialog-modal").dialog({
            autoOpen: true,
            width: 300,
            height: 250,
        });
    });
</script>

所以在视图中它应该是：

<body>
    <div id="dialog-modal" title="Basic modal dialog">

    </div>
</body>

这是我的捆绑配置文件

public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                       "~/Scripts/jquery-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                       "~/Scripts/jquery-ui-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.validate*"));

            
            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));

            bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                      "~/Scripts/bootstrap.js",
                      "~/Scripts/respond.js"));

            bundles.Add(new StyleBundle("~/Content/css").Include(
                      "~/Content/bootstrap.css",
                      "~/Content/datepicker.css",
                      "~/Content/site.css"));
        }

Answer 1

您的代码缺少主题css文件，请查看此示例 http://jsbin.com/ruhegijayu/1/

Answer 2

我解决了问题所以这就是我所做的首先在头部

 @Styles.Render("~/Content/css")
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
    @Scripts.Render("~/bundles/jquery")
    <script src="~/Scripts/jquery-2.1.3.js"></script>
    <script src="~/Scripts/jquery-ui-1.11.3.js"></script>
    @Scripts.Render("~/bundles/modernizr")
    
    <script>
       $(function () {
            $("#dialog-modal").dialog({
                autoOpen: false,
                width: 300,
                height: 250,
                
            });

            $("#modal-opener").click(function () {
                $("#dialog-modal").dialog("open");
            });
        });

        function onSuccess() {
            $("#dialog-modal").dialog("close");
        }
       
    </script>

并在我希望弹出窗口的视图中

<div id="dialog-modal" title="Basic modal dialog">

                    </div>

不支持使用asp.net mvc5的jQuery对话框模式

2 个答案: