フォームがいっぱいになるまで、ブートストラップのポップアップを維持する方法はありますか？

Question

私はブートストラップポップを使用してフォームを表示しています。ポップオーバーはうまくいきます。リンクからのフォーカスが外れている場合は、オーバーレイが隠れているため、値を入力することはできません。

これには修正がありますか？私は私の焦点がポップで終わるまで、ポップを保持したい。

要件：リンクの焦点に

1. 、オーバーポップが表示されるはずです。
2. これで、フォーム要素を入力することができます。
3. フォームからフォーカスが外れている場合、フォームはhideを取得する必要があります。

これは私が試したものです：

JS：

$(function(){ 
    $("[data-toggle=popover]").popover({ 
     html : true, 
     content: function() { 
      var content = $(this).attr("data-popover-content"); 
      return $(content).children(".popover-body").html(); 
     } 
    }); 
}); 

Demo Link

Answer 1

あなたは両方のJSの2つのシンプルなもの、（後述の最終的なコード） Fiddle updated

を行う必要があります

1. popover関数に遅延を追加する

2. デフォルトのmouseleaveイベントとコード行数を追加するmouseoverイベントをオーバーライドします。

以下の最終更新JSコード -

$(function(){ 
    //added 
    var originalLeave = $.fn.popover.Constructor.prototype.leave; 
    $.fn.popover.Constructor.prototype.leave = function(obj){ 
     var self = obj instanceof this.constructor ? 
      obj : $(obj.currentTarget)[this.type](this.getDelegateOptions()).data('bs.' + this.type) 
     var container, timeout; 

     originalLeave.call(this, obj); 

     if(obj.currentTarget) { 
     container = $(obj.currentTarget).siblings('.popover') 
     timeout = self.timeout; 
     container.one('mouseenter', function(){ 
      //We entered the actual popover – call off the dogs 
      clearTimeout(timeout); 
      //Let's monitor popover content instead 
      container.one('mouseleave', function(){ 
      $.fn.popover.Constructor.prototype.leave.call(self, self); 
      }); 
     }) 
     } 
    }; 

    $("[data-toggle=popover]").popover({ 
     html : true, 
     delay: {show: 50, hide: 400}, //added 
     content: function() { 
      var content = $(this).attr("data-popover-content"); 
      return $(content).children(".popover-body").html(); 
     } 
    }); 

});