4

ブートストラップを使用していて、ポップオーバーでフォームを作成したいと思います。これを実行しましたが、フォームのテキストフィールドに入力できません。誰かが理由を知っていますか？

*更新それはモーダルの中にあります。モーダルの外側では機能しますが、内部では機能しません...

* update2ほぼそこにあると思います。モーダルとポップオーバーを開くと、テキストフィールドに入力できません。モーダルを閉じた後もポップオーバーは開いたままなので、テキストフィールドに入力できます。したがって、テキストフィールドとポップアップの間にz-indexが必要です。本当にずさんですが、試しinput{z-index:9999;}ましたが、うまくいきませんでした

<a href="#" class="add_nr" data-nummer-id="nr_1" rel="popover">


<div id="add_number" class="popover">
    <div class="addnr" id="nr_1">
        <form class="form-inline">
            <div class="controls">
                <input type="text" placeholder="Artist">
            </div>
            <div class="controls">
                <input type="text" placeholder="Number">
            </div>
            <a href="#">cancel</a>
            <button type="submit" class="btn">add number</button>
        </form>
    </div>
</div>




$(function(){
        $('.add_nr').on('click', function(event){
            var $this = $(this);
            event.preventDefault();
            $('.add_nr').not($this).popover('hide');
            $this.popover('show');

        }).popover({
            trigger: 'manual',
            placement: 'bottom',
            content: function(e) {
                var $this = $(this),
                nr_id = $this.data('nummer-id');
                return $('#' + nr_id + '.addnr').html();
            }
        })
    });
4

2 に答える 2

1

モーダルが起動されると、モーダルはそれ自体にフォーカスを維持し、フォーム内の要素がフォーカスを取得するのを防ぎます。簡単な回避策は、モーダル起動時にリスナーを無効にすることです。

$('body').on('shown','.modal', function() {
  $(document).off('focusin.modal')
});
于 2012-10-26T14:21:23.737 に答える
1

この問題が発生し（フォームがモーダルで機能しないポップオーバー）、Bootstrap 4を使用している場合はdata-modal="false"、モーダルを開くボタン/コントローラーを使用してこれを修正できます。例えば：

<button type="button" class="btn" data-toggle="modal" data-target="#new" data-focus="false">

JSを使用してモーダルを開く場合は、focusオプションを渡すことができます。ここのオプションに関する完全なドキュメント

于 2020-05-20T16:02:12.450 に答える