javascript - jQuery を使用した ASP.NET のモーダルフォーム

Question

私は ASP.NET 開発に比較的慣れていませんが、これまでのところ物事をシンプルに保つことができましたが、要件がもう少し複雑になり、今のところあまり満足していません。

基本的に、ボタンをクリックして新しいユーザーを追加したときにモーダルフォームがポップアップするようにしたいので、jQuery サイトでこれを見つけました。これをASP.NETプロジェクト/ページに追加する適切な方法を理解するのに本当に苦労しています。

アドバイスをいただければ幸いです。

score 11 · Accepted Answer

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>

タグCSSを使用してファイルを含めることもできます。link

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

javascript - jQuery を使用した ASP.NET のモーダル フォーム