숨겨진 후 부트 스트랩 팝 오버의 내용을 유지하는 방법 또는 실제로 숨기는 방법

Question

숨겨 졌을 때 부스트랩 팝업이 내용을 파괴하고 다시 표시하는 것처럼 보일 때가 있습니다.

보십시오 this example보세요.

입력 내용을 쓰고 팝업을 숨기고 다시 표시하면 입력 내용이 비어있게됩니다.

내용을 사용하지 않고 그냥 표시 한 다음 다시 표시하면 안됩니까?

이를 방지하는 가장 좋은 방법은 무엇입니까? display: none 직접 popover해야합니까, 아니면 부트 스트랩 방식입니까?

입력 내용을 저장하고 유지하는 데 관심이 없다는 점에 유의하십시오.이 질문의 요지는 아닙니다. 내부에로드되고 활성화 된 jquery 플러그인 때문에 html을 유지하려고합니다.

Answer 1

기본 부트 스트랩을 사용하여 팝업을 '숨기기'만 가능하지 않은 경우 .popover('hide')은 HTML 팝업을 삭제합니다 (.popover('destroy') 요소에서 팝업 속성을 삭제 함).

나는 그걸 처리하는 가장 좋은 방법은 popover가 숨겨져있을 때 저장하고 popover가 보여 질 때 그것을 대체하는 것입니다. 팝 오버 이벤트 인 shown.bs.popover과 hide.bs.popover을 사용하면됩니다.

// By default, your popover content is empty, and you got somewhere a <div id="mypopovercontent"></div> which is hidden 

$('a').on('shown.bs.popover', function (e) { 
    $(this).data('bs.popover').$tip.find('.popover-content') 
     .html('') 
     .append($('#mypopovercontent')) ; 
    $('#mypopovercontent').show(); 
}) ; 

$('a').on('hide.bs.popover', function (e) { 
    $('body').append($('#mypopovercontent')) ; 
    $('#mypopovercontent').hide(); 
}) ; 

위의 코드는 확인하지 않았지만 아이디어를 얻었습니다.

Answer 2

HTML을 복제하여 콘텐츠로 사용하지 않는 이유는 무엇입니까?

<a href="#" rel="popover" data-popover-content="#myPopover">My Popover</a> 

$('[rel="popover"]').popover({ 
    container: 'body', 
    html: true, 
    content: function() { 
     var clone = $($(this).data('popover-content')).clone(true).removeClass('hide'); 
     return clone; 
    } 
}) 

Answer 3

나는 비슷한 필요성이 있었다. 나는 장소 편집 필드를 표시하기 위해 popover를 사용하고 있습니다. 일단 값이 저장되면 popover를 다시 클릭하면 동일한 소스 HTML이 복사되고 이전 값이 선택됩니다. 나는 업데이트와 몇 가지 다른 것들에 대한 가치를 설정하고 놀았으며 아무런 결과도 얻지 못했습니다.

show/hide 이벤트를 트리거하는 대신 수동으로 팝업을 표시하고 숨기는이 솔루션이 등장했습니다.

$(document).on('click', '.ajax-value', function() { 
    // We only want to init the popover once 
    if (typeof $(this).data('bs.popover') == "undefined") { 
     // Init the popover and show immediately 
     $(this).popover({ 
      'content': $(this).closest('.ajax-edit').find('.ajax-field').html(), 
      'html': true, 
      'title': $(this).attr('data-title'), 
      'placement': 'auto' 
     }).popover('show'); 

     // Hook into show event and return false so parent does not run 
     $(this).on('show.bs.popover', function() { 
      return false; 
     }); 

     // Same for hide, don't let parent execute 
     $(this).on('hide.bs.popover', function() { 
      return false; 
     }); 
    } else { 
     // If we already created popover, just toggle hidden class 
     $(this).closest('.ajax-edit').find('.popover').toggleClass('hidden'); 
    } 
}); 

// This is a custom close button in the popover 
$(document).on('click', '.ajax-field-close', function(){ 
    // Just add the hidden class 
    $(this).closest('.ajax-edit').find('.popover').addClass('hidden'); 
}); 

Answer 4

나는이 질문에 비틀 거리며 결국 색 선택 도구를 사용할 수 있도록 내 솔루션을 만들었습니다. 그것은 Holt의 답변과 비슷하지만 문제의 HTML을 두 개의 서로 다른 상위 div간에 실제로 이동한다는 점을 제외하고는 그 중 하나는 숨겨져 있습니다. 이렇게하면 사용자가 변경 한 내용이 보존됩니다.

이 코드를 사용하면 숨겨진 div 인 #color-picker-popover-parent 내에서 HTML이 시작됩니다. 난 단지 부트 스트랩 v3에서 그것을 시도했다.