jQuery UI 对话框“X”图标从模态和常见解决方案的右上角丢失

问题描述 投票:0回答:0

我遇到一个问题,我的 jQueryUI 对话框没有右上角的“x”图标。这个 stackO post

jQuery UI 对话框 - 缺少关闭图标

建议将 jQueryUi.js 参考放在 Bootstrap 之前

Literally, swap the two so that instead of:

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="js/bootstrap.min.js"></script>
it becomes

<script src="js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

这就是我的开头:

    public class BundleConfig
    {
        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.validate*",
                        "~/Scripts/jquery.unobtrusive-ajax.min.js"));

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

            // Use the development version of Modernizr to develop with and learn from. Then, when you're
            // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
            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/site.css"));            
        }
}
    

HTML 横截面:

    </body>         
        @Scripts.Render("~/bundles/modernizr")
        @Scripts.Render("~/bundles/jquery")
        @Scripts.Render("~/bundles/jquery-ui")
        @Scripts.Render("~/bundles/jqueryval")
        @Scripts.Render("~/bundles/bootstrap")
        
        @RenderSection("scripts", required: false)
    
    </body>  

      

我修改了HTML如下,

</body>         
    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @Scripts.Render("~/bundles/jquery-ui")
    @Scripts.Render("~/bundles/jqueryval")
        
    @RenderSection("scripts", required: false)

</body>      

虽然 X 被添加到对话框中,但文本“关闭”也出现在右上角的按钮上,而不是留在其中。对话框上的 2 个按钮,确定和取消,也没有填充。

我是这样展示的:

function ConfirmDelete(vendorId) {

    var $myDialog = $('<div></div>')
        .html('Are you sure that you want to delete State Assessment "' + vendorId + '?"')
        .dialog({
            modal: true,
            autoOpen: false,
            title: 'Delete Confirmation',
            position: {
                my: "center center",
                at: "center center",
                of: window
            },
            buttons: {
                "Cancel": function () {
                    $(this).dialog("close");
                    return false;
                },
                "OK": function () {
                    $(this).dialog("close");
                    var form = $("#Form_" + vendorId);
                    form.submit();
                    return true;
                }
            }
        }).dialog();


    $myDialog.dialog('open');
}

我的 packages.config,如果重要的话,如下所示。

<?xml version="1.0" encoding="utf-8"?>
<packages>
  <package id="Antlr" version="3.5.0.2" targetFramework="net461" />
  <package id="bootstrap" version="3.3.7" targetFramework="net461" />
  <package id="bootstrap.TypeScript.DefinitelyTyped" version="0.9.2" targetFramework="net461" />
  <package id="Cigna.Enterprise.Services.Data.DirectoryHelper" version="3.2.0.0" targetFramework="net451" />
  <package id="elmah.corelibrary" version="1.2.2" targetFramework="net461" />
  <package id="Elmah.Mvc" version="2.1.2" targetFramework="net461" />
  <package id="EntityFramework" version="6.1.3" targetFramework="net461" />
  <package id="jQuery" version="3.1.0" targetFramework="net461" />
  <package id="jQuery.Easing" version="1.3.0.1" targetFramework="net461" />
  <package id="jquery.TypeScript.DefinitelyTyped" version="3.1.0" targetFramework="net461" />
  <package id="jQuery.UI.Combined" version="1.12.0" targetFramework="net461" />
  <package id="jQuery.Validation" version="1.15.1" targetFramework="net461" />
  <package id="jqueryui.TypeScript.DefinitelyTyped" version="1.5.1" targetFramework="net461" />
  <package id="Microsoft.AspNet.Identity.Core" version="2.2.1" targetFramework="net451" />
  <package id="Microsoft.AspNet.Identity.EntityFramework" version="2.2.1" targetFramework="net451" />
  <package id="Microsoft.AspNet.Mvc" version="5.2.3" targetFramework="net461" />
  <package id="Microsoft.AspNet.Razor" version="3.2.3" targetFramework="net461" />
  <package id="Microsoft.AspNet.Web.Optimization" version="1.1.3" targetFramework="net451" />
  <package id="Microsoft.AspNet.WebPages" version="3.2.3" targetFramework="net461" />
  <package id="Microsoft.jQuery.Unobtrusive.Ajax" version="3.2.3" targetFramework="net461" />
  <package id="Microsoft.jQuery.Unobtrusive.Validation" version="3.2.3" targetFramework="net461" />
  <package id="Microsoft.Web.Infrastructure" version="1.0.0.0" targetFramework="net451" />
  <package id="Modernizr" version="2.8.3" targetFramework="net461" />
  <package id="Newtonsoft.Json" version="9.0.1" targetFramework="net461" />
  <package id="NUnit" version="3.4.1" targetFramework="net461" />
  <package id="Respond" version="1.4.2" targetFramework="net461" />
  <package id="WebGrease" version="1.6.0" targetFramework="net461" />
</packages>

我欢迎任何有关如何解决此特定问题以及更好地排序或修改依赖项的见解。

jquery asp.net-mvc twitter-bootstrap jquery-ui
© www.soinside.com 2019 - 2024. All rights reserved.