web-dev-qa-db-ja.com

Twitter Bootstrap=モーダルブロックテキスト入力フィールド

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

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

何か案が ？

私のコード：

<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…</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/

twitter-bootstrapmodal-dialog
35
user966737

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

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

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

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

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

bootstrap=モーダルトリガーが示す「示された」イベントをリッスンし、設定したフォーカスリスナーを無効にすることができます。

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

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

51
Eric Freese

twitter Bootstrap 3-イベント名が変更されたため、代わりに次のコードを使用している場合、Eric Freeseの回答は無効になります。

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

削除してください：

tabindex="-1"

から

<div id="myModal" class="modal hide" data-backdrop="" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

代わりにこれを使用してください：

<div id="myModal" class="modal hide" data-backdrop="" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
6
oparam

*解決済み

この問題が解決しない場合、解決策は次のとおりです。

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

3
Niall Lonergan

以下の方法でBootstrap v2.3.2、IE11のKendo UIグリッドバージョン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');
    });
1
ChinaHelloWorld

すべてのjavascriptコードのこのコードエンドを使用します。

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

jsfiddle

0
Reza Nadimi

以下は私のために働いた：

$('#myModal').on("show.bs.modal", (ev) => {
    $('#myModal').find(".modal-content").on("mousedown", (e) => {

                if ($(e.target).is("input")) {
                    //Fix for bootstrap modal being stealing focus from inputs like textbox
                    e.stopImmediatePropagation();
                }
            });
});
0
Faisal Mq

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

0
mabdrabo

私にとって問題は、jquery 3.2.1を使用していたことです。そのため、開発した以前のアプリで使用していた2.1.3に変更し、すべて正常に動作しました。 jqueryとbootstrap=互換バージョン。

それが役に立てば幸い

0
acubillo