jQueryを使用してテキストボックス内をクリックするとウィンドウが開きます

Question

www.redfin.comの検索ページに似た機能を作成します。ユーザーがテキストボックス内をクリックすると、検索フォームが開きます。

私はMVCとjQueryを使用していますが、どうすればよいか分かりません。ダイアログプラグインを使用しようとしましたが、何らかの理由でダイアログが一度だけ開きます。

<input id="txtSearch" type="text" /> 
<div id="searchForm" title="Dialog Title">I am a dialog</div> 

$("#txtSearch").click(function() { 
    // Show form 
    $("#searchForm").dialog(); 
}); 

ただし、通常のWebサイトでは、ダイアログボックスが開かれません。

$("#txtSearch").click(function() { 
     // Show form 
     $("#searchForm").dialog(); 
    }); 

フォーカスを使用するかクリックすると同じ効果が得られるようです。ダイアログは一度だけ開きます。私がそれを閉じ、再度テキストボックスをクリックすると、ダイアログは表示されません。

私はこのタスクを達成するための正しいアプローチを使用していますか？ サンプルはありますか？ 提案を歓迎します。

ダイアログは、タイトルを作成するため、最良の選択ではない可能性があります。私はajaxを介してフォームを投稿して同じページに結果を表示したいので、何が使えるのか不思議でした。

おかげ

Answer 1

あなたは、ドキュメント準備スクリプトでイベントバインディングをラップしていることを確認する必要があります（すでにこれを行っているかもしれませんが、サンプルコードになかったので）

$(document).ready(function() { 
    $("#txtSearch").click(function() { 
     // Show form 
     $("#searchForm").dialog(); 
    }); 
}); 

EDIT

$（ "＃のsearchForm"）ダイアログ（）;私は思うの検索フォームにダイアログを登録するだけです

私は表示して消えるために、ダイアログshow（）とhide（）を呼び出す必要があるかもしれないと思います。私は前にjqModalを使用してモーダルを閉じるには、

$(document).ready(function() { 
    $("#searchForm").jqm({modal: true}); //register this div as a modal 

    $("#txtSearch").click(function() { 
     // Show form 
     $("#searchForm").jqmShow(); //show div 
    }); 
}); 

後に、このようにそれを行うには持っていた、あなたはあなたの応答のための

$("#searchForm").jqmHide(); 

Answer 2

おそらくclickイベントの代わりにfocusイベントを使用します。

ダイアログに使用する限り、私はBeautyTipsをチェックアウトすることをお勧めします。そのページの「トリガーのカスタマイズ」の例をチェックしてください。これは正確に実行しようとしているものです。