Bootstrap Popover nội dung nhấp khi ẩn

Question

Trang web của tôi có nhiều popovers trên bản đồ (chỉ cần một div với hình nền) với các biểu tượng có thể click:

http://f.cl.ly/items/44382Q2Y3U3t2S450r3w/Skjermbilde%202013-09-01%20kl.%2023.15.58.png

Khi nhấp vào các biểu tượng, một popover được hiển thị. popover này có một băng chuyền có chứa văn bản với các liên kết:

http://f.cl.ly/items/0s2v2i193z0u1D0N163D/Skjermbilde%202013-09-01%20kl.%2023.35.34.png

Khi tôi bấm ngoài popover, tất cả popovers là ẩn. Điều này được cho là hoạt động tốt. Tôi nhận được mã số từ this Stack Overflow question.

Nhưng vấn đề thực sự xảy ra khi bạn nhấp vào bên ngoài cửa sổ bật lên để ẩn lại. Cửa sổ bật lên bị ẩn nhưng vẫn nằm trong DOM. Điều này có nghĩa là các liên kết vẫn có thể nhấp được!

http://f.cl.ly/items/0T0p422c1A202b2M1J20/Skjermbilde%202013-09-01%20kl.%2023.34.28.png

Khi tôi nhấp vào biểu tượng dấu cộng để ẩn popover, các popover được ẩn (loại bỏ?), Nhưng khi nhấp bên ngoài cộng (tức là bất cứ nơi nào trên trang), các popover vẫn còn hiện diện (nhưng không hiển thị) ngay trên </body>.

Vui lòng trợ giúp! Đây làm phiền các địa ngục ra khỏi tôi .. :(

Edit: Có thể là giá trị đề cập rằng popovers được tự động thêm vào:

$('.plus').each(function(i) { 

    var $self = $(this); 

    $self.popover({ 
     html: true, 
     title: false, 
     placement: function() { 
      return 'auto left'; // TODO: calculate placing 
     }, 
     content: function() { 

      var html = '<div id="carousel-' + i + '" class="carousel slide">'; 
      var list = '<ol class="carousel-indicators">'; 
      var slides = '<div class="carousel-inner">'; 

      var count = 0; 

      $('.post[data-category="' + $(this).data('category') + '"]').each(function(j) { 

       // add indicator for slide 
       list += '<li data-target="#carousel-' + i + '" data-slide-to="' + count + '"' + (count == 0 ? ' class="active"' : '') + '></li>'; 

       // add html for slide 
       slides += '<div class="item' + (count == 0 ? ' active' : '') + '">' + $(this).html() + '</div>'; 

       // increase counter 
       count++; 

      }); 

      // merge all html 
      html += list + '</ol>' + slides + '</div></div>'; 

      return html; 
     } 
    }); 

Answer 1

Tôi nghĩ rằng bạn cần phải "tiêu diệt" các popover, không chỉ để " giấu" nó

Xem API ở đây:. http://getbootstrap.com/2.3.2/javascript.html#popovers

Answer 2

tôi đã có một vấn đề tương tự, đau đầu lớn, và tìm kiếm tôi đã vào trang này:

https://github.com/twbs/bootstrap/issues/4215

Rõ ràng khi bạn thêm Popovers đến nội dung động bạn cần phải thêm tùy chọn này:

selector: '[rel="popover"]' 

trong trường hợp của bạn nó sẽ là

$self.popover({ 
    selector: '[rel="popover"]' 
    html: true, 
    title: false, 
    ... 

này giải quyết tất cả của tôi "phát hiện ẩn nhấp chuột popover" vấn đề.

Answer 3

Đây là những gì tôi đã làm để ngăn chặn các yếu tố trong popover ẩn từ được nhấp

$('button.new-history').on('hidden.bs.popover', function() { 
    $(this).next().remove(); 
}) 

Ý tưởng được rằng khi popover là ẩn, bạn nên loại bỏ nó từ DOM.

Hy vọng điều đó sẽ hữu ích!

Answer 4

Không có giải pháp nào khác phù hợp với tôi vì tôi đang sử dụng các chức năng khác để chỉ cho phép một cửa sổ bật lên tại một thời điểm và để ẩn cửa sổ bật lên khi nó mất tiêu điểm (chúng cũng được tạo động).

Nhưng tôi tìm thấy một giải pháp rất đơn giản sử dụng css để 'sửa chữa' vấn đề này:

.popover.fade { 
    z-index:-1; 
} 

.popover.fade.in { 
    z-index:2; 
} 

Chỉ cần chắc chắn rằng các .popover.in có z-index cao hơn các yếu tố khác của bạn, và tương tự rằng một cái không có .in có chỉ số z thấp hơn.

Answer 5

Tôi gặp phải sự cố tương tự và sau khi tìm kiếm một thời gian ở chế độ F12 trong Chrome, tôi thấy giải pháp sau đây đang hoạt động đối với tôi.

Sau khi đóng popover bằng tay với một nút:

<button 
    type=button 
    class="btn btn-default pull-right" 
    onclick="$('.mypopoverclass').popover('hide');"> 
    Close 
</button> 

nội dung của popover vẫn còn ở đó, vô hình và ẩn các yếu tố khác trên trang.

Tôi đã thay đổi nút một chút như thế này:

<button 
    type=button 
    class="btn btn-default pull-right" 
    onclick="$('.mypopoverclass').popover('hide'); $('.popover.fade').remove()"> 
    Close 
</button> 

Bằng cách thêm

$('.popover.fade').remove() 

nút onClick handler, cửa sổ popover đã được gỡ bỏ và không còn che giấu yếu tố trên màn hình. Ngoài ra, các cuộc gọi tiếp theo đến cửa sổ bật lên, sẽ hiển thị lại.

Tôi hy vọng nó cũng sẽ phù hợp với bạn!