單擊按鈕時顯示對話框
[英]Showing a dialog on button click
問題描述
這是我頁面的一部分：
<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的警報框。
為什么不起作用？ 有點是直接從書中的例子中得出的。
2 個解決方案
解決方案1
1 已采納 2014-08-25 12:11:34
您沒有加載任何jQuery UI CSS庫，並且正在加載普通jQuery的2個版本。 作為快速測試，請嘗試刪除自己的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>
附帶說明，您正在混合類型“ jscript”和“ javascript”。 從HTML5開始，您只需指定類型聲明即可。 假定它是CSS或JavaScript。
解決方案2
1 2014-08-25 12:13:15
在那里，您需要對代碼進行一些更改。 嘗試這個：
<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>
單擊按鈕打開對話框
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.