使用 jQuery 在 ASP.NET 中的模态表单答案

【问题标题】：Modal form in ASP.NET using jQuery使用 jQuery 在 ASP.NET 中的模态表单
【发布时间】：2013-09-06 10:00:06
【问题描述】：

我对 ASP.NET 开发比较陌生，到目前为止，我一直设法让事情变得简单，但我现在有一个更复杂的需求，到目前为止还没有得到太多的乐趣。

基本上我希望在单击按钮添加新用户时弹出一个模态表单，所以我找到了this on the jQuery site，我认为这是我正在寻找的东西，但我'我真的很难弄清楚将它添加到 ASP.NET 项目/页面的适当方法。

任何建议将不胜感激！

【问题讨论】：

【解决方案1】：

您需要包含对jQuery 和jQuery UI 的引用。

然后您需要为您的对话框制作一个容器，例如：

 <div id="dialog">
    <p>
       Your content here
    </p>
 </div>

然后您需要创建对话框，即当 DOM 加载时：

  $(document).ready(function() {
    $("#dialog").dialog({ autoOpen: false, height: 200, width: 200 });
  });

然后要使用按钮打开对话框，您可以添加一个简单的HTML 按钮并通过 jQuery 附加它。

<input type="button" ID="btnDialog" value="Click here to open the dialog" />

然后附加到jQuery:

$("#btnDialog").click(function() {
   $("#dialog").dialog("open");
});

JS 小提琴： http://jsfiddle.net/VtZYD/

确保 jQuery 以及 jQuery UI 已加载

这应该放在你的<head> 部分：

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

您还可以使用link 标签包含CSS 文件：

 <link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet" />

【讨论】：

感谢@darren-davies，对不起，你会把Javascript放在哪里？在我正在处理的 aspx 页面的 Head content 部分中，我在
@eboyens - 您需要在部分中包含 jQuery 参考。我将更新我的答案以包括jQuery 的 CDN 版本。请记住，对话需要jQuery UI。我们都是新人，所以不用担心:)
@DarrenDavies - +1 我在 SO 上看到的最佳答案之一。希望每个人的例子和解释都如此详尽（包括我！）
很好的综合答案@DarrenDavies，你甚至扔了一个jsfiddle :)
我认为你的答案很好，但恐怕我无法让它在我的 ASP.NET 项目中工作。项目中一定还有其他导致问题的东西 - 我现在没有收到任何错误，但是当我单击按钮时没有任何反应。如果我将 autoOpen 设置为 true，它会显示出来但看起来很奇怪，例如没有边框，并且关闭链接会出现并在单击时隐藏它。所以我会玩，不要指望你尝试在这个问题下进行排序。再次感谢！