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

Question

I'm relatively new to ASP.NET development, have so far managed to keep things simple but I now have a little more complex of a requirement and so far not getting much joy. 我对ASP.NET开发相对较新，到目前为止设法保持简单但我现在有一个更复杂的要求，到目前为止没有获得太多的快乐。

Essentially I'd like to have a modal form pop up when a button is clicked to add a new user, so I've found this on the jQuery site which I think is the sort of thing I'm looking for but I'm really struggling to figure out what the appropriate way is to add this to an ASP.NET project / page. 基本上我想在点击一个按钮添加一个新用户时弹出一个模态表单，所以我在jQuery网站上找到了这个，我认为这是我正在寻找的东西，但我是真的很难弄清楚将这个添加到ASP.NET项目/页面的适当方法。

Any advice would be highly appreciated thanks! 任何建议将非常感谢，谢谢！

Answer 1

You need to include a reference to jQuery and jQuery UI . 您需要包含对jQuery和jQuery UI的引用。

You then need to make a container for your dialog, such as: 然后，您需要为对话框创建一个容器，例如：

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

You then need to create the dialog, ie when the DOM loads: 然后，您需要创建对话框，即DOM加载时：

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

Then to open your dialog with a button, you can add a simple HTML button and attach that via jQuery. 然后使用按钮打开对话框，您可以添加一个简单的HTML按钮并通过jQuery附加它。

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

Then to attach to jQuery : 然后附加到jQuery ：

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

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

Ensure jQuery is loaded as well as jQuery UI 确保jQuery装载以及jQuery UI

This should be placed in your <head> section: 这应该放在你的<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>

You can also include the CSS files using a link tag: 您还可以使用link标记包含CSS文件：

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

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

问题描述

1 个解决方案

解决方案1
11 已采纳 2013-09-03 08:43:56

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

问题描述

1 个解决方案

解决方案1 11 已采纳 2013-09-03 08:43:56

解决方案1
11 已采纳 2013-09-03 08:43:56