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

时间:2013-09-03 08:40:56

标签: javascript jquery html asp.net html5

我对ASP.NET开发相对较新,到目前为止设法保持简单但我现在有一个更复杂的要求,到目前为止没有太多的快乐。

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

非常感谢任何建议,谢谢!

1 个答案:

答案 0 :(得分:11)

您需要添加对jQueryjQuery 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>

您还可以使用CSS代码添加link个文件:

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