Làm cách nào để loại bỏ một popover Twitter Bootstrap bằng cách nhấp vào bên ngoài?


289

Chúng ta có thể có được popovers để được loại bỏ theo cách tương tự như phương thức, tức là. làm cho họ đóng khi người dùng nhấp vào một nơi nào đó bên ngoài họ?

Thật không may, tôi không thể chỉ sử dụng phương thức thực sự thay vì popover, bởi vì phương thức có nghĩa là vị trí: cố định và đó sẽ không còn là popover nữa. :


3
Câu hỏi tương tự: stackoverflow.com/q/8947749/1478467
Sherbrow

Hãy thử stackoverflow.com/a/40661543/5823517 . Không liên quan đến vòng lặp qua cha mẹ
Tunn

data-trigger="hover"data-trigger="focus"được tích hợp thay thế để đóng cửa sổ bật lên, nếu bạn không muốn sử dụng chuyển đổi. Theo tôi, data-trigger="hover"cung cấp trải nghiệm người dùng tốt nhất ... không cần phải viết thêm mã .js ...
Hooman Bahreini

Câu trả lời:


461

Cập nhật: Một giải pháp mạnh mẽ hơn một chút: http://jsfiddle.net/mattdlockyer/C5GBU/72/

Đối với các nút chỉ chứa văn bản:

$('body').on('click', function (e) {
    //did not click a popover toggle or popover
    if ($(e.target).data('toggle') !== 'popover'
        && $(e.target).parents('.popover.in').length === 0) { 
        $('[data-toggle="popover"]').popover('hide');
    }
});

Đối với các nút có chứa biểu tượng sử dụng (mã này có lỗi trong Bootstrap 3.3.6, hãy xem cách khắc phục bên dưới trong câu trả lời này)

$('body').on('click', function (e) {
        //did not click a popover toggle, or icon in popover toggle, or popover
        if ($(e.target).data('toggle') !== 'popover'
            && $(e.target).parents('[data-toggle="popover"]').length === 0
            && $(e.target).parents('.popover.in').length === 0) { 
            $('[data-toggle="popover"]').popover('hide');
        }
    });

Đối với Popovers Popovers được sử dụng '[data-original-title]'thay cho'[data-toggle="popover"]'

Hãy cẩn thận : Giải pháp trên cho phép nhiều cửa sổ bật lên được mở cùng một lúc.

Một popover tại một thời điểm xin vui lòng:

Cập nhật: Bootstrap 3.0.x, xem mã hoặc fiddle http://jsfiddle.net/mattdlockyer/C5GBU/2/

$('body').on('click', function (e) {
    $('[data-toggle="popover"]').each(function () {
        //the 'is' for buttons that trigger popups
        //the 'has' for icons within a button that triggers a popup
        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
            $(this).popover('hide');
        }
    });
});

Điều này xử lý việc đóng cửa sổ bật lên đã mở và không được nhấp vào hoặc liên kết của chúng chưa được nhấp.


Cập nhật: Bootstrap 3.3.6, xem fiddle

Khắc phục sự cố trong khi sau khi đóng, mất 2 lần nhấp để mở lại

$(document).on('click', function (e) {
    $('[data-toggle="popover"],[data-original-title]').each(function () {
        //the 'is' for buttons that trigger popups
        //the 'has' for icons within a button that triggers a popup
        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {                
            (($(this).popover('hide').data('bs.popover')||{}).inState||{}).click = false  // fix for BS 3.3.6
        }

    });
});

Cập nhật: Sử dụng điều kiện của cải tiến trước đó, giải pháp này đã đạt được. Khắc phục sự cố nhấp đúp và ma popover:

$(document).on("shown.bs.popover",'[data-toggle="popover"]', function(){
    $(this).attr('someattr','1');
});
$(document).on("hidden.bs.popover",'[data-toggle="popover"]', function(){
    $(this).attr('someattr','0');
});
$(document).on('click', function (e) {
    $('[data-toggle="popover"],[data-original-title]').each(function () {
        //the 'is' for buttons that trigger popups
        //the 'has' for icons within a button that triggers a popup
        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
            if($(this).attr('someattr')=="1"){
                $(this).popover("toggle");
            }
        }
    });
});

2
Tôi đính kèm $(document)thay $('body')vì đôi khi bodykhông mở rộng ra toàn bộ trang.
jasop

6
Sau khi kích hoạt cửa sổ bật lên (và hành động ẩn tiếp theo), cửa sổ bật lên không bị ẩn hoàn toàn; nó chỉ không nhìn thấy được Vấn đề là nội dung bên dưới cửa sổ bật lên vô hình nhưng hiện tại không thể được nhấp hoặc di chuột. Vấn đề xảy ra trên build mới nhất của Chrome, mới nhất bootstrap 3 .js (có thể là các trình duyệt khác là tốt, có thể không bị làm phiền để kiểm tra kể từ workaround này nên được yêu cầu anyway)
ravb79

6
Thay vì '[data-toggle="popover"]', không hoạt động với popovers được tạo bằng JavaScript, tôi đã sử dụng '[data-original-title]'làm công cụ chọn.
Nathan

4
Có ai biết tại sao giải pháp này không hoạt động với phiên bản bootstrap mới nhất không? Điều sau đây đang xảy ra: Nhấp vào nút để hiển thị popover, sau đó nhấp vào cơ thể để loại bỏ popover, sau đó nhấp vào nút để hiển thị popover và popover không hiển thị. Sau khi nó thất bại một lần nếu bạn nhấp vào nó một lần nữa, nó hiển thị. Nó là rất lạ.
JTunney

3
@JTunney Tôi đang chạy BS 3.3.6 và vẫn thấy hành vi đó yêu cầu hai lần nhấp để mở một popoever sau khi loại bỏ một.
sersun

65
$('html').on('mouseup', function(e) {
    if(!$(e.target).closest('.popover').length) {
        $('.popover').each(function(){
            $(this.previousSibling).popover('hide');
        });
    }
});

Điều này sẽ đóng tất cả các cửa sổ bật lên nếu bạn nhấp vào bất cứ nơi nào ngoại trừ trên một cửa sổ bật lên

CẬP NHẬT cho Bootstrap 4.1

$("html").on("mouseup", function (e) {
    var l = $(e.target);
    if (l[0].className.indexOf("popover") == -1) {
        $(".popover").each(function () {
            $(this).popover("hide");
        });
    }
});

Tôi đã thêm một lớp vào nút kích hoạt cửa sổ bật lên (pop-btn) để nó không bao gồm ... if (! $ (E.target) .closest ('. Popover'). Length &&! $ (E. mục tiêu) .closest ('. btn'). hasClass ('pop-btn'))
mozgras

2
với 3 nút popover, mã này gây ra vấn đề. trong một số trường hợp tôi không thể nhấp vào nút và các nút được nhấp nháy.
OpenCode

1
Không thể có được mã này để làm việc ... hãy kiểm tra câu đố này và vui lòng thêm một câu đố vào câu trả lời của bạn. jsfiddle.net/C5GBU/102
mattdlockyer 18/03/2016

Hoàn hảo cho tôi. Các câu trả lời khác có tác dụng phụ khi "nhấp chuột bên ngoài" của tôi tình cờ mở một cửa sổ bật lên mới.
Tỷ lệ Facio

Điều này hoạt động rất tốt, nhưng cần có cách để điều chỉnh điều này để nếu bạn nhấp vào nội dung của cửa sổ bật lên, nó sẽ không đóng. ví dụ: nếu bạn nhấp vào văn bản bên trong thẻ <b> bên trong cửa sổ bật lên ...
Ben trong CA

40

Phiên bản an toàn đơn giản nhất, thất bại nhất , hoạt động với bất kỳ phiên bản bootstrap nào.

Bản giới thiệu: http://jsfiddle.net/guya/24mmM/

Bản demo 2: Không bỏ qua khi nhấp vào bên trong nội dung popover http://jsfiddle.net/guya/fjZja/

Bản demo 3: Nhiều cửa sổ bật lên: http://jsfiddle.net/guya/6YCjW/


Chỉ cần gọi đường dây này sẽ loại bỏ tất cả các cửa sổ bật lên:

$('[data-original-title]').popover('hide');

Loại bỏ tất cả các cửa sổ bật lên khi nhấp vào bên ngoài với mã này:

$('html').on('click', function(e) {
  if (typeof $(e.target).data('original-title') == 'undefined') {
    $('[data-original-title]').popover('hide');
  }
});

Đoạn mã trên đính kèm một sự kiện nhấp chuột trên cơ thể. Khi người dùng nhấp vào cửa sổ bật lên, nó sẽ hoạt động như bình thường. Khi người dùng nhấp vào một cái gì đó không phải là popover, nó sẽ đóng tất cả các cửa sổ bật lên.

Nó cũng sẽ hoạt động với các popovers được khởi tạo bằng Javascript, trái ngược với một số ví dụ khác sẽ không hoạt động. (xem bản demo)

Nếu bạn không muốn loại bỏ khi nhấp vào bên trong nội dung popover, hãy sử dụng mã này (xem liên kết đến bản demo thứ 2):

$('html').on('click', function(e) {
  if (typeof $(e.target).data('original-title') == 'undefined' && !$(e.target).parents().is('.popover.in')) {
    $('[data-original-title]').popover('hide');
  }
});

3
Có một vấn đề tương tự và điều này đã hoạt động trong Bootstrap 3.
wsams 15/11/13

Nếu bạn mang popovers lại gần sao cho popovers trùng nhau, khi bạn ẩn một popover bằng cách nhấp vào đâu đó bên ngoài, một trong các liên kết sẽ ngừng hoạt động. Kiểm tra: jsfiddle.net/qjcuyksb/1
Sandeep Giri

1
Phiên bản cuối cùng không hoạt động khi sử dụng bootstrap-datepicker trong popover.
dbinott

1
Tôi thích giải pháp này là tốt nhất, bởi vì câu trả lời được chấp nhận bắt đầu là một chút tài nguyên với 30 cửa sổ bật lên
David G

1
Có lẽ !$(e.target).closest('.popover.in').lengthsẽ hiệu quả hơn !$(e.target).parents().is('.popover.in').
joeytwiddle 3/03/2016

19

Với bootstrap 2.3.2, bạn có thể đặt kích hoạt thành 'tiêu điểm' và nó chỉ hoạt động:

$('#el').popover({trigger:'focus'});

1
+1, nhưng lưu ý bên quan trọng: Điều này không đóng cửa sổ bật lên, nếu bạn nhấp lại vào nút hoặc neo, trong khi câu trả lời được chấp nhận.
Christian Gollhardt

18

Điều này về cơ bản không phức tạp lắm, nhưng có một số kiểm tra phải làm để tránh sự cố.

Bản trình diễn (jsfiddle)

var $poped = $('someselector');

// Trigger for the popover
$poped.each(function() {
    var $this = $(this);
    $this.on('hover',function() {
            var popover = $this.data('popover');
            var shown = popover && popover.tip().is(':visible');
            if(shown) return;        // Avoids flashing
            $this.popover('show');
    });
});

// Trigger for the hiding
 $('html').on('click.popover.data-api',function() {
    $poped.popover('hide');
});

2
điều này loại bỏ phương thức bằng cách nhấp vào mọi nơi không phải bên ngoài
hienbt88

Có thể làm điều này với một popover()nhấp chuột chứ không phải di chuột?
Zaki Aziz

3
Tất nhiên, nhưng bạn cần phải gọi stopPropagation()trên các sự kiện truyền cho handler nhấp chuột (nếu không, trốn xử lý ngay lập tức ẩn popover). Bản demo (jsfiddle)
Sherbrow

Tôi đã có chức năng tương tự dưới đây trong mã ít hơn nhiều. Câu trả lời này đầy ắp và hơi vô lý cho câu hỏi ... Tất cả những gì anh ấy muốn là đóng cửa sổ bật lên khi bạn nhấp vào bên ngoài ... Điều này là quá mức cần thiết và UGLY!
mattdlockyer

2
Sửa chữa, tôi tin rằng tôi có chức năng TỐT HƠN trong mã FAR ít hơn. Nó giả định rằng bạn chỉ muốn một cửa sổ bật lên tại một thời điểm được hiển thị. Nếu bạn thích điều này, vui lòng upvote câu trả lời của tôi dưới đây: jsfiddle.net/P3qRK/1 câu trả lời: stackoverflow.com/a/14857326/1060487
mattdlockyer

16

Không có giải pháp nào được bình chọn cao làm việc cho tôi một cách chính xác. Mỗi lần dẫn đến một lỗi khi sau khi mở và đóng (bằng cách nhấp vào các yếu tố khác) lần đầu tiên, cửa sổ bật lên sẽ không mở lại cho đến khi bạn thực hiện hai lần nhấp vào liên kết kích hoạt thay vì một lần nhấp.

Vì vậy, tôi đã sửa đổi nó một chút:

$(document).on('click', function (e) {
    var
        $popover,
        $target = $(e.target);

    //do nothing if there was a click on popover content
    if ($target.hasClass('popover') || $target.closest('.popover').length) {
        return;
    }

    $('[data-toggle="popover"]').each(function () {
        $popover = $(this);

        if (!$popover.is(e.target) &&
            $popover.has(e.target).length === 0 &&
            $('.popover').has(e.target).length === 0)
        {
            $popover.popover('hide');
        } else {
            //fixes issue described above
            $popover.popover('toggle');
        }
    });
})

1
Đẹp, nó đang làm việc cho tôi. BTW bạn đã quên a); ở cuối mã của bạn sau lần cuối}
Merlin

1
Có cùng một vấn đề liên quan đến lần nhấp thứ hai. Đây sẽ là câu trả lời không an toàn!
Felipe Leão

Tôi cũng đã thử các giải pháp trước đây, nhưng như một hướng dẫn cho những người cũng đang tìm kiếm một giải pháp vào năm 2016, đây là một giải pháp tốt hơn.
dariru

Câu trả lời hàng đầu, hoạt động như quảng cáo. như đã lưu ý, những người khác thì không. đây phải là câu trả lời hàng đầu
duggi

Hoạt động hoàn hảo ngoại trừ tôi không sử dụng data-toggel = "popover". Nhưng bạn có thể chỉ định bất kỳ bộ chọn phù hợp với các yếu tố kích hoạt popover của bạn. Giải pháp tốt đẹp và là giải pháp duy nhất giải quyết vấn đề hai lần nhấp cho tôi.
shock_gone_wild

11

Tôi đã tạo một jsfiddle để chỉ cho bạn cách làm điều đó:

http://jsfiddle.net/3yHTH/

Ý tưởng là hiển thị cửa sổ bật lên khi bạn nhấp vào nút và để ẩn cửa sổ bật lên khi bạn nhấp bên ngoài nút.

HTML

<a id="button" href="#" class="btn btn-danger">Click for popover</a>

Mã não

$('#button').popover({
    trigger: 'manual',
    position: 'bottom',
    title: 'Example',
    content: 'Popover example for SO'
}).click(function(evt) {
    evt.stopPropagation();
    $(this).popover('show');
});

$('html').click(function() {
    $('#button').popover('hide');
});

bản demo đẹp. Tôi tự hỏi làm thế nào bạn có thể gọi popover trên đối tượng Jquery, popover là một plugin js bootstrap, nhưng bạn không bao gồm bất kỳ tệp js bootstrap nào ở đó?
bingjie2680

Có một tệp js trong jsfiddle. Nhìn vào cột bên trái -> Quản lý tài nguyên.
Pigueiras

Ok, tôi thấy có một js bootstrap. nhưng nó không được kiểm tra, nó vẫn hoạt động?
bingjie2680

Có nó hoạt động. Dù sao, tôi đã tìm kiếm trong google: jsfiddle bootstrapvà nó đã cho tôi bộ xương của bootstrap css + js trong jsfiddle.
Pigueiras

2
Vấn đề duy nhất của tôi với điều này là bạn ẩn cửa sổ bật lên khi bạn nhấp vào nó. Cũng có thể chỉ cần sử dụng một tooltip.
NoBrainer

7

chỉ cần thêm thuộc tính này với phần tử

data-trigger="focus"

Ban đầu, nó không hoạt động với tôi với Bootstrap 3.3.7 nhưng sau đó tôi đọc các tài liệu và họ có một số hướng dẫn đáng được đề cập ở đây. Từ ví dụ popover không thể chấp nhận được trong tài liệu "Đối với hành vi đa nền tảng và đa nền tảng phù hợp, bạn phải sử dụng thẻ <a>, không phải thẻ <button> và bạn cũng phải bao gồm các thuộc tính vai trò =" nút "và tabindex . "
Jeff

3

Điều này đã được hỏi trước đây . Câu trả lời tương tự tôi đã đưa ra sau đó vẫn được áp dụng:

Tôi có một nhu cầu tương tự, và tìm thấy phần mở rộng nhỏ tuyệt vời này của Twitter Bootstrap Popover của Lee Carmichael, được gọi là BootstrapX - clickover . Ông cũng có một số ví dụ sử dụng ở đây . Về cơ bản, nó sẽ thay đổi cửa sổ bật lên thành một thành phần tương tác sẽ đóng khi bạn nhấp vào nơi khác trên trang hoặc trên nút đóng trong cửa sổ bật lên. Điều này cũng sẽ cho phép nhiều cửa sổ mở cùng một lúc và một loạt các tính năng hay khác.


3

Đây là bữa tiệc muộn ... nhưng tôi nghĩ tôi muốn chia sẻ nó. Tôi yêu popover nhưng nó có rất ít chức năng tích hợp. Tôi đã viết một phần mở rộng bootstrap .bubble () đó là tất cả mọi thứ tôi muốn popover. Bốn cách để bác bỏ. Nhấp vào bên ngoài, bật liên kết, nhấp vào X và nhấn thoát.

Nó tự động định vị để nó không bao giờ tắt trang.

https://github.com/Itumac/bootstrap-bubble

Đây không phải là một lời quảng cáo vô cớ ... Tôi đã lấy mã của người khác rất nhiều lần trong đời, tôi muốn đưa ra những nỗ lực của riêng mình. Cung cấp cho nó một xoáy và xem nếu nó làm việc cho bạn.


3

Theo http://getbootstrap.com/javascript/#popovers ,

<button type="button" class="popover-dismiss" data-toggle="popover" title="Dismissible popover" data-content="Popover Content">Dismissible popover</button>

Sử dụng kích hoạt tập trung để loại bỏ popovers vào lần nhấp tiếp theo mà người dùng thực hiện.

$('.popover-dismiss').popover({
    trigger: 'focus'
})

2
Không hoạt động trên các trình duyệt Mac tuân theo hành vi gốc của OS X (không tập trung cũng không làm mờ các nút khi nhấp). Chúng bao gồm Firefox và Safari. Những kẻ bootstrap đã phạm một sai lầm lớn ở đây, vì những popovers này thậm chí không thể được mở, chứ đừng nói là gạt bỏ.
Ante Vrli

2
@AnteVrli Có thể điều này chưa có trong tài liệu khi bạn viết bình luận nhưng bây giờ các tài liệu nói: "Để có hành vi đa trình duyệt và đa nền tảng phù hợp, bạn phải sử dụng <a>thẻ, không phải <button>thẻ và bạn cũng phải bao gồm role="button"tabindexthuộc tính." Bạn đã thử nó với các thông số kỹ thuật?
Louis

3
Vâng, có một vấn đề với câu trả lời này, trong đó có liên quan gì đến khả năng tương thích nền tảng: nhấn một nút chuột bên trong một popover sẽ bỏ qua những popover vì yếu tố đó gây nên các popover sẽ mất tập trung. Quên người dùng có thể sao chép và dán từ cửa sổ bật lên: ngay khi nút chuột không hoạt động, cửa sổ bật lên sẽ đóng lại. Nếu bạn có các mục có thể thao tác trong cửa sổ bật lên (nút, liên kết), người dùng sẽ không thể sử dụng chúng.
Louis

Quá nhiều cho 'đa nền tảng' vì trong bootstrap 4.0.0-beta và 4.0.0-beta.2 Tôi không thể làm điều này để hoạt động trên Mac trong Chrome :(
rmcsharry

3

Sửa đổi giải pháp chấp nhận. Những gì tôi đã trải nghiệm là sau khi một số popovers bị ẩn, chúng sẽ phải được bấm hai lần để hiển thị lại. Đây là những gì tôi đã làm để đảm bảo rằng popover ('ẩn') sẽ không được gọi trên các popovers đã bị ẩn.

$('body').on('click', function (e) {
    $('[data-original-title]').each(function () {
        //the 'is' for buttons that trigger popups
        //the 'has' for icons within a button that triggers a popup
        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
            var popoverElement = $(this).data('bs.popover').tip();
            var popoverWasVisible = popoverElement.is(':visible');

            if (popoverWasVisible) {
                $(this).popover('hide');
                $(this).click(); // double clicking required to reshow the popover if it was open, so perform one click now
            }
        }
    });
});


3

Giải pháp này hoạt động tốt:

$("body")   .on('click'     ,'[data-toggle="popover"]', function(e) { 
    e.stopPropagation();
});

$("body")   .on('click'     ,'.popover' , function(e) { 
     e.stopPropagation();
});

$("body")   .on('click'  , function(e) {
        $('[data-toggle="popover"]').popover('hide');
});

2
jQuery("#menu").click(function(){ return false; });
jQuery(document).one("click", function() { jQuery("#menu").fadeOut(); });

2

Bạn cũng có thể sử dụng bong bóng sự kiện để xóa cửa sổ bật lên khỏi DOM. Nó hơi bẩn, nhưng hoạt động tốt.

$('body').on('click touchstart', '.popover-close', function(e) {
  return $(this).parents('.popover').remove();
});

Trong html của bạn, thêm lớp .popover-close vào nội dung bên trong cửa sổ bật lên sẽ đóng cửa sổ bật lên.


2

Có vẻ như phương thức 'ẩn' không hoạt động nếu bạn tạo cửa sổ bật lên với ủy nhiệm bộ chọn, thay vào đó phải sử dụng 'hủy'.

Tôi đã làm cho nó hoạt động như thế:

$('body').popover({
    selector: '[data-toggle="popover"]'
});

$('body').on('click', function (e) {
    $('[data-toggle="popover"]').each(function () {
        //the 'is' for buttons that trigger popups
        //the 'has' for icons within a button that triggers a popup
        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
            $(this).popover('destroy');
        }
    });
});

Mã hóa ở đây


2

Chúng tôi phát hiện ra rằng chúng tôi có vấn đề với giải pháp từ @mattdlockyer (cảm ơn vì giải pháp!). Khi sử dụng thuộc tính bộ chọn cho hàm tạo popover như thế này ...

$(document.body').popover({selector: '[data-toggle=popover]'});

... giải pháp đề xuất cho BS3 sẽ không hoạt động. Thay vào đó, nó tạo ra một thể hiện popover thứ hai cục bộ $(this). Đây là giải pháp của chúng tôi để ngăn chặn điều đó:

$(document.body).on('click', function (e) {
    $('[data-toggle="popover"]').each(function () {
        //the 'is' for buttons that trigger popups
        //the 'has' for icons within a button that triggers a popup
        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
            var bsPopover = $(this).data('bs.popover'); // Here's where the magic happens
            if (bsPopover) bsPopover.hide();
        }
    });
});

Như đã đề cập, $(this).popover('hide');sẽ tạo ra một ví dụ thứ hai do người nghe được ủy quyền. Giải pháp được cung cấp chỉ che giấu các popovers đã được cung cấp.

Tôi hy vọng tôi có thể tiết kiệm thời gian của các bạn.


2

Bootstrap vốn hỗ trợ điều này :

Bản giới thiệu Bin Bin

Đánh dấu cụ thể cần thiết để loại bỏ lần nhấp tiếp theo

Cho thích hợp qua trình duyệt và hành vi cross-platform, bạn phải sử dụng <a>thẻ, không các <button>thẻ, và bạn cũng phải bao gồm role="button"tabindexcác thuộc tính.


Trong bootstrap 4.0.0-beta và 4.0.0-beta.2, tôi không thể làm việc này trên Mac trong Chrome :(
rmcsharry

Nhấp vào bất cứ nơi nào đóng cửa sổ bật lên này, người hỏi yêu cầu "nhấp bên ngoài cửa sổ bật lên đóng nó", điều này là khác nhau.
philw

2

giải pháp này thoát khỏi lần nhấp thứ 2 phiền phức khi hiển thị cửa sổ bật lên lần thứ hai

đã thử nghiệm với Bootstrap v3.3.7

$('body').on('click', function (e) {
    $('.popover').each(function () {
        var popover = $(this).data('bs.popover');
        if (!popover.$element.is(e.target)) {
            popover.inState.click = false;
            popover.hide();                
        }
    });
});

2

Tôi đã thử nhiều câu trả lời trước đây, thực sự không có gì hiệu quả với tôi nhưng giải pháp này đã làm:

https://getbootstrap.com/docs/3.3/javascript/#dismiss-on-next-click

Họ khuyên bạn nên sử dụng thẻ neo không phải nút và chăm sóc các thuộc tính vai trò = "nút" + data-trigger = "tập trung" + tabindex = "0".

Ví dụ:

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" 
data-trigger="focus" title="Dismissible popover" data-content="amazing content">
Dismissible popover</a>


1

Tôi đã nghĩ ra điều này: Kịch bản của tôi bao gồm nhiều cửa sổ bật lên trên cùng một trang và việc ẩn chúng chỉ khiến chúng trở nên vô hình và vì thế, việc nhấp vào các mục phía sau cửa sổ bật lên là không thể. Ý tưởng là đánh dấu liên kết popover cụ thể là 'hoạt động' và sau đó bạn có thể chỉ cần 'chuyển đổi' cửa sổ bật lên đang hoạt động. Làm như vậy sẽ đóng hoàn toàn popover $ ('. Popover-link'). Popover ({html: true, container: 'body'})

$('.popover-link').popover().on 'shown.bs.popover', ->
  $(this).addClass('toggled')

$('.popover-link').popover().on 'hidden.bs.popover', ->
  $(this).removeClass('toggled')

$("body").on "click", (e) ->
  $openedPopoverLink = $(".popover-link.toggled")
  if $openedPopoverLink.has(e.target).length == 0
    $openedPopoverLink.popover "toggle"
    $openedPopoverLink.removeClass "toggled"

1

Tôi chỉ xóa các popovers hoạt động khác trước khi popover mới được hiển thị (bootstrap 3):

$(".my-popover").popover();

$(".my-popover").on('show.bs.popover',function () {
    $('.popover.in').remove();
});              

1

thử nghiệm với 3.3.6 và nhấp chuột thứ hai là ok

        $('[data-toggle="popover"]').popover()
            .click(function () {
            $(this).popover('toggle');
        });;

        $(document).on('click', function (e) {
            $('[data-toggle="popover"]').each(function () {
                //the 'is' for buttons that trigger popups
                //the 'has' for icons within a button that triggers a popup
                if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
                    $(this).popover('hide');
                }
            });
        });

0

bản demo: http://jsfiddle.net/nessajtr/yxpM5/1/

var clickOver = clickOver || {};
clickOver.uniqueId = $.now();

clickOver.ClickOver = function (selector, options) {
    var self = this;

    //default values
    var isVisible, clickedAway = false;

    var callbackMethod = options.content;
var uniqueDiv = document.createElement("div");
var divId = uniqueDiv.id = ++clickOver.uniqueId;
uniqueDiv.innerHTML = options.loadingContent();

options.trigger = 'manual';
options.animation = false;
options.content = uniqueDiv;

self.onClose = function () {
    $("#" + divId).html(options.loadingContent());
    $(selector).popover('hide')
    isVisible = clickedAway = false;
};
self.onCallback = function (result) {
    $("#" + divId).html(result);
};

$(selector).popover(options);

//events
$(selector).bind("click", function (e) {
    $(selector).filter(function (f) {
        return $(selector)[f] != e.target;
    }).popover('hide');

    $(selector).popover("show");
    callbackMethod(self.onCallback);

    isVisible = !(clickedAway = false);
});

$(document).bind("click", function (e) {
    if (isVisible && clickedAway && $(e.target).parents(".popover").length == 0) {
        self.onClose();
        isVisible = clickedAway = false;
    } else clickedAway = true;
});

}

đây là giải pháp của tôi cho nó


0

Cách tiếp cận này đảm bảo rằng bạn có thể đóng cửa sổ bật lên bằng cách nhấp vào bất kỳ đâu trên trang. Nếu bạn nhấp vào một thực thể có thể nhấp khác, nó sẽ ẩn tất cả các cửa sổ bật lên khác. Hình ảnh động: false là bắt buộc khác, bạn sẽ gặp lỗi jquery .remove trong bảng điều khiển.

$('.clickable').popover({
 trigger: 'manual',
 animation: false
 }).click (evt) ->
  $('.clickable').popover('hide')
  evt.stopPropagation()
  $(this).popover('show')

$('html').on 'click', (evt) ->
  $('.clickable').popover('hide')

0

Ok đây là nỗ lực đầu tiên của tôi khi thực sự trả lời một cái gì đó trên stackoverflow vì vậy ở đây không có gì: P

Có vẻ như không rõ ràng rằng chức năng này thực sự hoạt động vượt trội trên bootstrap mới nhất (tốt, nếu bạn sẵn sàng thỏa hiệp ở đâu người dùng có thể nhấp vào. Tôi không chắc bạn có phải đặt 'nhấp chuột không di chuột 'per-se nhưng trên iPad, nhấp hoạt động như một chuyển đổi.

Kết quả cuối cùng là, trên máy tính để bàn, bạn có thể di chuột hoặc nhấp (hầu hết người dùng sẽ di chuột). Trên một thiết bị cảm ứng, chạm vào phần tử sẽ đưa nó lên và chạm vào một lần nữa sẽ đưa nó xuống. Tất nhiên, đây là một sự thỏa hiệp nhỏ so với yêu cầu ban đầu của bạn nhưng ít nhất mã của bạn hiện đã sạch hơn :)

$ (". my-popover"). popover ({trigger: 'click hover'});


0

Lấy mã của Matt Lockyer, tôi đã thực hiện thiết lập lại đơn giản để dom không bị che bởi phần tử ẩn.

Mã của Matt: http://mattlockyer.com/2013/04/08/close-a-twitter-bootstrap-popover-when-clicking-outside/

Câu đố: http://jsfiddle.net/mrsmith/Wd2qS/

    $('body').on('click', function (e) {
    //hide popover from dom to prevent covering elements
    $('.popover').css('display', 'none');
    //bring popover back if trigger element is clicked
    $('[data-toggle="popover"]').each(function () {
        if ($(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
            $('.popover').css('display', 'block');
        }
    });
    //hide popover with .popover method
    $('[data-toggle="popover"]').each(function () {
        //the 'is' for buttons that trigger popups
        //the 'has' for icons within a button that triggers a popup
        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
            $(this).popover('hide');
        }
    });
});

0

Hãy thử điều này, điều này sẽ ẩn bằng cách nhấp vào bên ngoài.

$('body').on('click', function (e) {
    $('[data-toggle="popover"]').each(function () {
    //the 'is' for buttons that trigger popups
    //the 'has' for icons within a button that triggers a popup
    if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
    $(this).popover('hide');
    }
    });
});

0

Tôi gặp vấn đề với giải pháp mattdlockyer vì tôi đang thiết lập các liên kết popover một cách linh hoạt bằng cách sử dụng mã như thế này:

$('body').popover({
        selector : '[rel="popover"]'
});

Vì vậy, tôi đã phải sửa đổi nó như vậy. Nó đã sửa rất nhiều vấn đề cho tôi:

$('html').on('click', function (e) {
  $('[data-toggle="popover"]').each(function () {
    //the 'is' for buttons that trigger popups
    //the 'has' for icons within a button that triggers a popup
    if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
        $(this).popover('destroy');
    }
  });
});

Hãy nhớ rằng tiêu diệt được loại bỏ phần tử, vì vậy phần chọn là quan trọng trong việc khởi tạo popovers.

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.