jQueryを使用したモーダルウィンドウの入力について

Question

JQueryを使ったモーダルウィンドウのことで困っています。

モーダルウィンドウを以下のように作成しました。ほとんど問題なく動作しています。

<div id="out"> <div id="in"> // モーダルの内容 </div> </div>

１つだけ問題があります。
モーダルウィンドウを開いたときに、最初の１回だけ、<div id="in">の<input>や<button>の部分や、
空白の部分をマウスクリックしないと、モーダルウィンドウが正常に動作しません。

最初の１回だけマウスクリックすれば正常に動作するということは、モーダルウィンドウがアクティブ、
あるいは、フォーカスが必要かと
$(window).on('load', function() {
// 処理A
});
の「処理A」にフォーカスの処理を追加したりしましたが、解決策にはなっていません。

解決するポイントは、
１．最初に<div id="in">のどこかにフォーカスする。
２．最初の表示状態の時に、何か必要な処理が抜けている。
３．最初の１回だけ、疑似的にクリックしたように処理を追加する。
など、どのような観点から解決したらいいのか、わかりません。

似たような動作を解決した方おりましたら、ご教示いただければ幸いです。

Comments

[kei344]

書かれている状況が再現するコード（HTML/CSS/jsなど）か、再現するURLを提示されたほうが回答を得やすいと思います。

[退会済みユーザー]

勉強のため自力でコードを書きたいということでなければ、jQery UI の Dialog を使うという選択肢はないのでしょうか？　http://jqueryui.com/dialog/

Answer 1

$(window).on('load', はページ全体のロード後に発生するイベントなので、今回はモーダルのポップ後に再フォーカスする必要があります。
Bootstrapの例ですが ( http://getbootstrap.com/javascript/ )

$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').focus()
});

のように、モーダルが出た後に#myInputにフォーカスし直すことで解決できます。