42

モーダルをポップアップ ヘルプ ウィンドウとして使用しようとしています。背景を「なし」に設定しました。モーダルを (背景なしで) 開くと、「元の」ページの入力フィールドにフォーカスできません。

他の入力タイプ (例ではチェックボックスとボタン) はうまく機能します...

何か案が ？

私のコード:

<div class="container">
<!-- Button to trigger modal -->
  <form>
      <label>Input</label>
      <input type="text" placeholder="Type something…">
      <label class="checkbox">
        <input type="checkbox">Checkbox
      </label>
      <button type="submit" class="btn">Submit</button>
  </form>

  <!-- Button to trigger modal -->
  <a href="#myModal" role="button" class="btn" data-toggle="modal">Open Help...</a>

  <!-- Modal -->
  <div id="myModal" class="modal hide" data-backdrop="" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
      <h3 id="myModalLabel">Modal header</h3>
    </div>
    <div class="modal-body">
      <p>One fine body…&lt;/p>
    </div>
    <div class="modal-footer">
      <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    </div>
  </div>
</div>

ポップアップをドラッグ可能にする簡単な Javascript:

$('#myModal').draggable();

これはすべてJSFiddleで...

http://jsfiddle.net/Jxdd8/3/

4

11 に答える 11

55

ここでは、モーダルが問題の適切な解決策ではないようです。

定義上、モーダル ダイアログでは、ユーザーがその下にあるものと対話することはできません。

ユーザー インターフェイスの設計では、モーダル ウィンドウは子ウィンドウであり、ユーザーが親アプリケーションの操作に戻る前に対話する必要があるため、アプリケーションのメイン ウィンドウでのワークフローが妨げられます。

- http://en.wikipedia.org/wiki/Modal_window

そうは言っても、それを回避する方法があります。Bootstrapはイベント リスナーをセットアップして、他のすべてからフォーカスを奪います。これが、テキスト入力の編集を妨げている原因です。他のボタンは、フォーカスを必要とせず、クリック イベントのみを必要とするため機能します。

ブートストラップ モーダルがトリガーする 'shown' イベントをリッスンし、それが設定するフォーカス リスナーを無効にすることができます。

$('#myModal').on('shown', function() {
    $(document).off('focusin.modal');
});

そして楽しみのために：http://jsfiddle.net/Jxdd8/4/

于 2013-02-10T06:18:45.773 に答える
47

Twitter Bootstrap 3 を使用している場合、Eric Freese の回答は無効になることに注意してください。イベント名が変更されたため、代わりに次のコードを使用してください。

$('#myModal').on('shown.bs.modal', function() {
    $(document).off('focusin.modal');
});
于 2014-02-15T12:17:33.273 に答える
4

*解決済み

誰かがまだこの問題で立ち往生している場合、解決策は次のとおりです。

div クラスの<div class="modal fade"挿入後:style="display:none;"これにより、モーダルがフィールドをブロックするのを停止し、問題を解決する必要があります。

于 2013-11-13T10:26:28.187 に答える
1

次の方法で、Bootstrap v2.3.2、IE11 の Kendo UI Grid バージョン 2013.3.1119.340 でこの問題を修正できます。

ポイントは、モーダルのクラスから「in」クラスを削除することです。"style='display:none;'" を使用すると Kendo Grid UI が奇妙に動作するため、使用する必要はありません。

修正前の html コード: 

  <div class="modal hide fade in" id="YourWindow" role="dialog">

修正後の html コード:

  <div class="modal hide fade" id="YourWindow" role="dialog">
       <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>            
       </div>
       <div class="modal-body" >
          <div id="YourWindowBody">
          </div>
       </div>
       <div class="modal-footer">
          <button type="button" data-dismiss="modal">Close</button>      
       </div>
  </div>

同時に、JavaScript の次の行を追加します。

    $("#YourWindow").on('shown', function () {
        $(document).off('focusin.modal');
    });
于 2014-03-28T04:39:28.430 に答える
0

Eric Freeseが言ったように、「モーダルダイアログは、定義上、ユーザーがその下にあるものと対話できるようにするべきではありません。」私はあなたが探しているものがポップオーバーで見つかると思います。ポップオーバーにはhtmlコンテンツを許可するオプションがありますhttp://twitter.github.com/bootstrap/javascript.html#popovers

于 2013-02-10T12:05:31.227 に答える
0

すべての JavaScript コードの最後にこのコードを使用します。

$(document).on('focusin', function(e) {
    if ($(event.target).closest(".mce-window").length) {
        e.stopImmediatePropagation();
    }
});

jsfiddle

于 2016-05-15T18:30:50.437 に答える