Як відмовитись від завантажувача Twitter Bootstrap, натиснувши назовні?


289

Чи можемо ми отримати потужність, яку можна відпустити так само, як і модали, тобто. зробити їх закритими, коли користувач клацає десь поза ними?

На жаль, я не можу просто використовувати справжній модальний замість Popover, тому що модальний означає позицію: фіксовану, і це вже не буде перепоною. :(


3
Схожий питання: stackoverflow.com/q/8947749/1478467
Sherbrow

Спробуйте це stackoverflow.com/a/40661543/5823517 . Не передбачає циклічного
прогляду

data-trigger="hover"і data-trigger="focus"є вбудованою альтернативою для закриття попу, якщо ви не хочете використовувати перемикач. На мій погляд, data-trigger="hover"забезпечує найкращий досвід користувача ... немає потреби писати зайвий .js код ...
Hooman Bahreini

Відповіді:


461

Оновлення: Трохи більш надійне рішення: http://jsfiddle.net/mattdlockyer/C5GBU/72/

Для кнопок, що містять лише текст:

$('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');
    }
});

Для кнопок, що містять піктограми (цей код містить помилку в Bootstrap 3.3.6, див. Виправлення нижче у цій відповіді)

$('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');
        }
    });

Для використання поколінь, створених JS,'[data-original-title]' замість'[data-toggle="popover"]'

Caveat: Рішення, наведене вище, дозволяє відкрити декілька потужностей одночасно.

Одночасно, будь ласка:

Оновлення: Bootstrap 3.0.x, див. Код або загадку 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');
        }
    });
});

Це обробляє закриття Popovers вже відкритих і не натиснуті або їх посилання не було натиснуто.


Оновлення: Bootstrap 3.3.6, див. Загадку

Виправляється питання, де після закриття потрібно 2 кліки, щоб повторно відкритись

$(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
        }

    });
});

Оновлення: За допомогою умовного попереднього вдосконалення цього рішення було досягнуто. Вирішіть проблему подвійного клацання та переживання привидів:

$(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
Я додаю $(document)замість того, що $('body')іноді bodyне поширюється на всю сторінку.
jasop

6
Після активації popover (та подальшої дії приховування), popover не повністю прихований; це просто не видно Проблема полягає в тому, що вміст під невидимим, поки що не існує, не можна клацати чи затримувати. Проблема виникає під час останньої збірки Chrome, найновішої завантажувальної версії 3 .js (можуть бути й інші веб-переглядачі, перевірити не вдалося, оскільки це все-таки потрібно вимагати)
ravb79

6
Замість того '[data-toggle="popover"]', який не працює з поповами, створеними JavaScript, я використовував '[data-original-title]'як селектор.
Натан

4
Хтось знає, чому це рішення не працює з останньою версією завантажувальної програми? Відбувається наступне: Клацніть кнопку, щоб показати popover, потім натисніть на тіло, щоб відхилити popover, потім натисніть кнопку, щоб показати popover, і popover не відображається. Після того, як він не виходить один раз, якщо натиснути його знову, він відображається. Це дуже дивно.
JTunney

3
@JTunney Я працюю на BS 3.3.6 і все ще бачу таку поведінку, де потрібно два клацання, щоб відкрити попуді після відхилення одного.
sersun

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

Це закриває всі поїздки, якщо натиснути де завгодно, окрім як на popover

ОНОВЛЕННЯ для завантаження 4.1

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

Я додав клас до кнопки, яка запускає popover (pop-btn), тому він не включається ... if (! $ (E.target) .closest ('. Popover'). Length &&! $ (E. target) .closest ('. btn'). hasClass ('pop-btn'))
mozgras

2
з трьома кнопками переходу, цей код створює проблеми. у деяких випадках я не можу натиснути кнопку, і кнопки блимають.
OpenCode

1
Не вдається з цим кодом працювати ... перевірте цю загадку і будь ласка, додайте загадку до своєї відповіді. jsfiddle.net/C5GBU/102
mattdlockyer

Ідеально підходить для мене. Інші відповіді мали побічні ефекти, коли мій "зовнішній клік" трапився, щоб відкрити новий поповер.
Facio Ratio

Це чудово працює, але потрібно мати спосіб адаптувати це, щоб, якщо натиснути на вміст переїзду, він не закриється. Наприклад, якщо ви натискаєте на текст усередині тега <b> всередині попову ...
Бен в Каліфорнії

40

Найпростіша, найбезпечніша безпечна версія , працює з будь-якою версією завантаження.

Демонстрація: http://jsfiddle.net/guya/24mmM/

Демонстрація 2: Не відхиляється при натисканні всередині вмісту Popover http://jsfiddle.net/guya/fjZja/

Демонстрація 3: Кілька переповнень: http://jsfiddle.net/guya/6YCjW/


Просто зателефонувавши за цією лінією, вимкнете всіх людей, які перебувають у цій галузі:

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

Відхиліть усі перехожі, натиснувши назовні цей код:

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

Фрагмент вище прикріплює події кліку на тілі. Коли користувач натискає на попу, він буде вести себе як нормально. Коли користувач натисне на щось, що не є перепоном, він закриє всі перепони.

Він також буде працювати з popovers, які ініціюються з Javascript, на відміну від деяких інших прикладів, які не працюватимуть. (дивіться демонстрацію)

Якщо ви не хочете відмовлятись, натискаючи всередині вмісту переповненого, скористайтеся цим кодом (див. Посилання на другу демонстрацію):

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


Якщо наблизити перепон так, що перепони перекриваються, коли заховати попову, натиснувши десь назовні, одне з посилань перестане працювати. Перевірка: jsfiddle.net/qjcuyksb/1
Sandeep Giri

1
Остання версія не працює при використанні bootstrap-datepicker в popover.
dbinott

1
Найкраще мені сподобалось це рішення, тому що прийнята відповідь почала бути трохи зародженим ресурсом з 30 або більше спливаючих вікон
David G

1
Можливо, це !$(e.target).closest('.popover.in').lengthбуло б більш ефективно, ніж !$(e.target).parents().is('.popover.in').
joeytwiddle

19

За допомогою завантажувальної версії 2.3.2 ви можете встановити тригер на "фокус", і він просто працює:

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

1
+1, але важлива бічна зауваження: це не закриває потенціал, якщо ви знову натиснете на кнопку або якір, тоді як прийнята відповідь робить.
Крістіан Голхардт

18

Це в основному не дуже складно, але є певна перевірка, щоб уникнути збоїв.

Демо (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
це відхиляє модальний режим, клацнувши скрізь не за межами
hienbt88

Чи можливо це зробити за допомогою popover()натискання, а не наведення курсору?
Закі Азіз

3
Звичайно, але вам потрібно зателефонувати stopPropagation()на подію, передану обробнику кліків (якщо ні, обробник , що переховується, негайно приховає поповер). Демо (jsfiddle)
Шербров

У мене така ж функціональність внизу в набагато меншому коді. Ця відповідь роздута і трохи смішна на запитання ... Все, що він хоче, - це закрити перепони, коли ти клацнеш назовні ... Це надмірне і нечітке!
mattdlockyer

2
Виправлення, я вважаю, що у мене є кращий функціонал в меншому коді. Це передбачає, що ви хочете бачити лише одне спливаюче вікно за раз. Якщо вам подобається це , будь ласка upvote моя відповідь нижче: jsfiddle.net/P3qRK/1 відповідь: stackoverflow.com/a/14857326/1060487
mattdlockyer

16

Жодне із передбачуваних голосових рішень не працювало на мене правильно. Кожен призводить до помилки, коли після відкриття та закриття (натискаючи на інші елементи) перепон вперше, він не відкриється знову, доки ви не зробите два клацання по спусковому посиланню замість одного.

Тому я трохи змінив його:

$(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
Приємно, це працює для мене. До речі ви забули а); в кінці коду після останнього}
Мерлін,

1
Була така ж проблема, що стосується другого клацання. Це має бути невдалою відповіддю!
Феліпе Лео

Я також спробував попередні рішення вище, але як настанова для тих, хто також шукає рішення станом на 2016 рік, це краще рішення.
dariru

відповідь вгорі, працює як рекламується. як зазначалося, інші цього не зробили. це має бути головна відповідь
diggi

Працює чудово, за винятком того, що я не використовував data-toggel = "popover". Але ви можете вказати будь-який селектор, який відповідає вашим елементам запуску. Приємне рішення і єдине, що вирішило для мене питання двох клацань.
shock_gone_wild

11

Я створив jsfiddle, щоб показати вам, як це зробити:

http://jsfiddle.net/3yHTH/

Ідея полягає в тому, щоб показати попову, коли ви натискаєте кнопку, і приховати попову, коли натискаєте кнопку поза.

HTML

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

JS

$('#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');
});

приємна демонстрація. Мене цікавить, як ви могли викликати popover на об'єкті Jquery, popover - плагін для завантаження js, але ви не включаєте до нього жодного файлу bootstrap js?
bingjie2680

У jsfiddle є js-файл. Подивіться на лівий стовпець -> Управління ресурсами.
Pigueiras

Гаразд, я бачу, що є завантажувальний js. але це не перевірено, воно все ще працює?
bingjie2680

Так, це працює. У будь-якому разі я шукав у google: jsfiddle bootstrapі це дало мені скелет завантажувального css + js у jsfiddle.
Pigueiras

2
Моя єдина проблема в цьому полягає в тому, що ти приховуєш поповер, коли клацнеш по ньому. Можна також просто використовувати підказку.
NoBrainer

7

просто додайте цей атрибут з елементом

data-trigger="focus"

Спочатку це не спрацювало для мене з Bootstrap 3.3.7, але потім я прочитав документи, і вони мають деякі рекомендації, про які варто згадати тут. З прикладу "Недопустимий перехід" у документах "Для правильної поведінки між веб-браузером та крос-платформою ви повинні використовувати тег <a>, а не тег <кнопка>, а також потрібно включити атрибути role =" button "та tabindex . "
Джефф

3

Про це вже питали тут . Та сама відповідь, яку я дав тоді, все ще стосується:

У мене була подібна потреба, і я знайшов це чудове невелике розширення Twitter Bootstrap Popover від Лі Кармайкл, яке називається BootstrapX - кліковер . Він також має деякі приклади використання тут . В основному це перетворить поповер на інтерактивний компонент, який закриється, коли ви натиснете в іншому місці сторінки або на кнопку закриття в межах попову. Це також дозволить відкрити декілька потужностей одночасно та купу інших приємних функцій.


3

Це пізно на вечірку ... але я думав, що поділюсь цим. Я люблю popover, але він має так мало вбудованої функціональності. Я написав розширення для завантажувальної програми .bubble (), тобто це все, що я хотів би мати popover. Чотири способи звільнення. Клацніть назовні, перемкніть посилання, натисніть X і натисніть клавішу втечі.

Він розташовується автоматично, щоб він ніколи не відходив від сторінки.

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

Це не безоплатно самореклама ... Я стільки разів в житті хапала код інших людей, хотіла запропонувати власні зусилля. Дайте йому вир і подивіться, чи працює він для вас.


3

Відповідно до http://getbootstrap.com/javascript/#popovers ,

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

Скористайте спусковий механізм фокусування, щоб відхилити перехоплення при наступному натисканні, який робить користувач.

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

2
Не працює в Mac-браузерах, які слідкують за поведінкою OS X (яка не фокусується і не розмиває кнопки при натисканні) До них відносяться Firefox та Safari. Хлопці з Bootstrap тут зробили велику помилку, оскільки цих переповнень неможливо навіть відкрити, не кажучи вже про звільнення.
Ante Vrli

2
@AnteVrli Можливо, цього ще не було в документації, коли ви писали свій коментар, але тепер документи говорять: "Для правильної поведінки між веб-браузером та крос-платформою ви повинні використовувати <a>тег, а не <button>тег. Ви також повинні включати role="button"і tabindexатрибути ». Ви спробували це з цими специфікаціями?
Луї

3
Ну, є проблема з цією відповіддю, яка не має нічого спільного з сумісністю платформи: натискання кнопки миші всередині попова відхилить попову, оскільки елемент, який запускає поповер, втратить увагу. Забудьте про те, що користувачі зможуть копіювати та вставляти з пунктів пропуску: як тільки кнопка миші опуститься, поповер закриється. Якщо у вас є позиції, які можна реалізувати в переході (кнопки, посилання), користувачі не зможуть ними користуватися.
Луї

Настільки багато для "крос-платформи", тому що в завантажувальній версії 4.0.0-бета і 4.0.0-бета.2 я не можу змусити це працювати на Mac у Chrome :(
rmcsharry

3

Змінено прийняте рішення. Я пережив, що після того, як деякі приховані були сховані, їх потрібно було би клацнути двічі, щоб знову з’явитися. Ось що я зробив, щоб переконатися, що Popover ('приховати') не викликався вже прихованими поповами.

$('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

Це рішення прекрасно працює:

$("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

Ви також можете використовувати бульбашку подій для видалення спливаючого вікна з DOM. Він трохи брудний, але працює чудово.

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

У своєму HTML додавайте клас .popover-close до вмісту всередині popover, який повинен закрити popover.


2

Здається, що метод "приховати" не працює, якщо ви створюєте поповер з делегуванням селектора, натомість потрібно використовувати "знищити".

Я змусив це працювати так:

$('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');
        }
    });
});

JSfiddle тут


2

Ми з’ясували, що у нас виникла проблема з рішенням від @mattdlockyer (спасибі за рішення!). При використанні властивості селектора для конструктора, що працює в Popover ...

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

... запропоноване рішення для BS3 не працюватиме. Натомість він створює другий потужний екземпляр, локальний для нього $(this). Ось наше рішення для запобігання:

$(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();
        }
    });
});

Як вже було сказано, за $(this).popover('hide');допомогою делегованого слухача буде створено другу інстанцію. Зазначене рішення тільки приховує потужність, яка вже є інстанційною.

Сподіваюся, я міг би врятувати вас, хлопці, на деякий час.


2

Bootstrap споконвічно підтримує це :

Демонстрація JS Bin

Конкретна розмітка, необхідна для відхилення при наступному натисканні

Для правильного крос-браузер і поведінку крос-платформної, ви повинні використовувати <a>тег, НЕ<button> тегів, і ви також повинні включати в себе role="button"і tabindexатрибути.


У завантажувальній версії 4.0.0-бета та 4.0.0-бета.2 я не можу змусити це працювати на Mac у Chrome :(
rmcsharry

Клацання де-небудь закриває цей попвер, запитуючий вимагає "натиснути поза Popover закриває його", що відрізняється.
філв

2

це рішення позбавляється від настирливого 2-го клацання, коли показує перепон вдруге

перевірено на 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

Я спробував багато попередніх відповідей, насправді нічого не працює для мене, але це рішення:

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

Вони рекомендують використовувати анкерний тег не кнопка та піклуватися про атрибути role = "button" + data-Trigger = "focus" + tabindex = "0".

Наприклад:

<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>

спробуйте це посилання теж: stackoverflow.com/questions/20466903 / ...
Ahmed El Damasy

1

Я придумав таке: мій сценарій включав більше переповнених на одній сторінці, а їх приховування просто зробило їх непомітними, і через це натискання на елементи, що стояли за поповом, було неможливим. Ідея полягає у тому, щоб позначити конкретне поповер-посилання як "активне", і тоді ви можете просто "переключити" активний поповер. Це повністю закриє 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

Я просто видаляю інші активні переїзди до появи нового попова (завантажувальний 3):

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

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

1

перевірено з 3.3.6 і другим клацанням все в порядку

        $('[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

демо: 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;
});

}

це моє рішення для цього.


0

Цей підхід гарантує, що ви можете закрити поїзд, натиснувши будь-яке місце на сторінці. Якщо ви натиснете на інший об'єкт, який можна натиснути, він приховає всі інші перепони. Анімація: false потрібна, інакше ви отримаєте помилку jquery .remove у своїй консолі.

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

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

0

Добре, це моя перша спроба насправді відповісти на щось на stackoverflow, тому тут нічого не виходить: P

Здається, що не зовсім зрозуміло, що ця функціональність насправді працює з останнього завантаження (ну, якщо ви готові йти на компроміс, де користувач може натиснути. Я не впевнений, чи потрібно вам клацнути "натиснути" Наведіть курсор, але на iPad натисніть кнопку "Працює як перемикач".

Кінцевий результат полягає в тому, що на робочому столі ви можете навести курсор або клацнути (більшість користувачів наведуть курсор). На дотиковому пристрої дотик до елемента підніме його, а доторкнувшись до нього, знизить його. Звичайно, це невеликий компроміс від вашої початкової вимоги, але принаймні ваш код тепер чистіший :)

$ (". мій-popover"). popover ({тригер: 'клацніть наведення'});


0

Взявши код Метта Лок'єра, я зробив простий скидання, щоб купол не прикривався елементом у приховуванні.

Код Метта: http://mattlockyer.com/2013/04/08/close-a-twitter-bootstrap-popover-when-clicking-outside/

Fiddle: 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

Спробуйте це, це буде приховано, натиснувши назовні.

$('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

У мене виникли проблеми з рішенням mattdlockyer, оскільки я динамічно налаштовував перехідні посилання, використовуючи такий код:

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

Тож мені довелося так модифікувати. Він вирішив багато питань для мене:

$('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');
    }
  });
});

Пам’ятайте, що знищення позбавляється елемента, тому частина селектора важлива для ініціалізації переходів.

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.