Question

这是我页面的一部分：

<link href="scripts/jquery-ui.css" rel="stylesheet" />
<link href="scripts/jquery-ui.theme.css" rel="stylesheet" />

<script type="text/jscript" src="scripts/jquery.js"></script>
<script type="text/jscript" src="scripts/jquery-ui.js"></script>
<script type="text/jscript" src="scripts/jquery-2.1.1.min.js"></script>

</head>
<body>
    <form id="form1" runat="server" enctype="multipart/form-data" method="post">
        <div>

            <asp:Image ID="Image1" runat="server" ImageUrl="~/images/HeaderBar.png" CssClass="header" />
            <asp:Image ID="Image2" runat="server" ImageUrl="~/images/title.PNG" CssClass="Title" />
            <img alt="" class="logo" src="Images/ECON_76px.png" />
            <asp:Label ID="Label2" runat="server" CssClass="VersionText" Text="Version {0}"></asp:Label>

            <asp:LinkButton ID="lbLogOff" runat="server" CssClass="lbLogOff" ToolTip="Close your current session">Log off</asp:LinkButton>

            <asp:LinkButton ID="lbReset" runat="server" CssClass="lbReset" OnClientClick="ShowDialog();" ToolTip="Restart your session as if you would just have logged in">Restart</asp:LinkButton>

            <asp:Label ID="lblTestDB" runat="server" CssClass="lblTestDB" Text="CONNECTED TO TEST DATABASE"></asp:Label>

            <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server" ViewStateMode="Enabled">
            </asp:ContentPlaceHolder>
        </div>


        <div id="dialog" title="Restart">
            <p>This will clear all data of the current session (as if you would have just logged in)!</p>
            <p>Are you sure?</p>
            <input id="yes" type="button" value="Yes" />
            <input id="no" type="button" value="No" />
        </div>

        <script type="text/jscript">
            function ShowDialog() {
                $("#dialog").dialog({
                    buttons:
                    {
                        "Yes": function () { $("#dialog").dialog("close"); return false; }
                        , "No": function () { return true; }
                    }
                }).prev().find(".ui-dialog-titlebar-close").hide();
            }
        </script>

    </form>
</body>

我的想法是在点击重启按钮时显示一个对话框，因为我不喜欢Chrome的提醒框。

为什么不起作用？从书中的一个例子中直接看出它。

Answer 1

您没有加载任何jQuery UI CSS库，并且您正在加载2个版本的普通jQuery。作为快速测试，请尝试删除您自己的jQuery库并链接到Google以帮助您入门。然后你可以逐渐将你的回归：

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>

旁注，你是混合类型＆＃34; jscript＆＃34;和＆＃34; javascript＆＃34;。从HTML5开始，您可以简单地省略指定类型声明。它将被假定为CSS或JavaScript。

Answer 2

您的代码需要进行一些更改。试试这个：

   <script type="text/javascript">
        $(document).ready(function(){
            $("#dialog").dialog({
                buttons:
                {
                    "Yes": function () { $("#dialog").dialog("close"); return false; }
                    , "No": function () { return true; }
                }
            }).prev().find(".ui-dialog-titlebar-close").hide();
        });

        function ShowDialog() {
            $("#dialog").dialog('open');
        }
    </script>

显示按钮单击时的对话框

2 个答案: