JQuery UIを使用してフォームダイアログを作成するにはどうすればよいですか？

Question

これは明らかなように思えるかもしれませんが、私は一晩中これを調べていません。私はJQueryが好きですが、JQueryのUIはマスターできません。多分私は何か基本的なものを見逃しているのかもフォームを含む画面上にポップアップを表示させようとしています。Submitをクリックすると、ユーザー入力をデータベースに送信するためにAjaxの魔法を実行する必要があります。これはすべて問題ありませんが、実際にボックスを表示させることは別の話です。私は数十のチュートリアルに続き、それは私を嫌う。基本的に、これは故障である：

私のウェブサイトは（Linux上で開発されている）私は/mysite/includes/jquery.jsにjQueryと（特に）jQueryのUIを保つ絶対ルート・パス/個人用サイト

を持っています/ mysite/includes/jquery-ui/... "..."はすべてのJQuery UIソースファイルです。

ページの主な「ボディ」はちょっと複雑です。基本的には、Ajaxを使って "content"という名前のdivでタブシステムを使ってすべてをスワップしています。このdivには、JQuery UIのサンプルサイトに示すように、ダイアログ入力フォームをポップアップするために必要なクリック可能なリンクが含まれています。

私は、次のコードの全てが「内容」のdiv要素である...いくつかの種類に次のようにやってみました。この時点で

<link rel="stylesheet" href="/mysite/includes/jquery-ui/themes/base/ui.all.css" type="text/css"> 
    <script src="/mysite/includes/jquery-ui/jquery-1.6.2.js"></script> 
    <script src="/mysite/includes/jquery-ui/ui/ui.draggable.js"></script> 
    <script src="/mysite/includes/jquery-ui/ui/ui.resizable.js"></script> 
    <script src="/mysite/includes/jquery-ui/ui/ui.core.js"></script> 
    <script src="/mysite/includes/jquery-ui/ui/ui.dialog.js"></script> 
    <script src="/mysite/includes/jquery-ui/external/jquery.bgiframe-2.1.2.js"></script> 
    <link type="text/css" href="/mysite/includes/jquery-ui/demos/demos.css" rel="stylesheet" /> 

、私が取得することは事実上すべての例を試してみました私がオンラインで見つけたポップアップはありませんでした。どうすれば実際に開くことができますか？すべてのJQuery UIスクリプトを "head"タグなどに含める必要がありますか？または、JQueryに「コンテンツ」要素の代わりにメインウィンドウを参照するように何とか指示する必要がありますか？

ご協力いただければ幸いです。ありがとう！

Answer 1

を開始するには良い場所です：http://jsfiddle.net/cadkJ/125/

フォームがサブミットされた後、それがポップアップしたい場合は、あなただけにこれを追加することができますコード内$(document).ready();：

$("#form").submit(function(){ 
     $("#modal-background, #modal-content").toggleClass("active"); 
     $.ajax({ 
      type: "POST", 
      url: "http://www.example.com/form.php", 
      data: {name: "John Smith", address: "3 Tree Street"}, 
      success: function(data){}, 
      dataType: "json"}); 
     return false; 
    }); 

うまくいけば、これはあなた、または少なくともjQuery UIダイアログのはるかに軽量なソリューションを探している人には役に立ちます。

Answer 2

通常、ドックは始めるのに適しています.DOM（ "フォーム"）についてはDOMにありますが、あまりにも多くのHTTPリクエストがある場合はライブモードで圧縮し、 html5bolierplateビルドは、私はトン少ない肥大化し、これはjQueryのダイアログではないですけど、それ