JQuery popover on hover остается активным, так что содержимое доступно для интерактивного просмотра [дубликат]

char s[] = "hello";

объявляет s как массив из char, который достаточно длинный, чтобы удерживать инициализатор (5 + 1 char s) и инициализирует массив, копируя члены данного строкового литерала в array.

char *s = "hello";

объявляет s указателем на один или несколько (в данном случае больше) char s и указывает его непосредственно в фиксированном (только для чтения) месте, содержащем литерал "hello".

256
задан ahsteele 1 April 2013 в 23:07
поделиться

30 ответов

Обновление: немного более надежное решение: 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 Generated Popovers Используйте '[data-original-title]' на месте из '[data-toggle="popover"]'

Предостережение: вышеприведенное решение позволяет сразу открывать несколько popovers.

По одному экземпляру за один раз:

Обновление: 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');
        }
    });
});

Это обрабатывает закрытие всплывающих окон, которые уже открыты, а не нажаты или их ссылки не были нажаты.


Обновление: 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
        }

    });
});
405
ответ дан 18 revs, 3 users 79% 28 August 2018 в 18:05
поделиться

Я придумал это: мой сценарий включал в себя больше popovers на одной странице, и их скрытие просто сделало их невидимыми, и из-за этого щелчок по элементам позади popover не был возможен. Идея состоит в том, чтобы отметить конкретную popover-ссылку как «активную», а затем вы можете просто «переключить» активный popover. Выполнение этого полностью закрывает 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"
0
ответ дан Adi Nistor 28 August 2018 в 18:05
поделиться

Я просто удаляю другие активные popovers перед тем, как будет показано новое popover (bootstrap 3):

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

$(".my-popover").on('show.bs.popover',function () {
    $('.popover.in').remove();
});              
1
ответ дан andrearonsen 28 August 2018 в 18:05
поделиться

Ни один из предполагаемых высоко разрешенных решений не работал для меня правильно. Каждый из них приводит к ошибке, когда после открытия и закрытия (щелкнув по другим элементам) popover в первый раз, он не открывается снова, пока вы не сделаете два клика на триггерной ссылке вместо одного.

Поэтому я немного изменил его:

$(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');
        }
    });
})
14
ответ дан Anton Sergeyev 28 August 2018 в 18:05
поделиться

Этот подход гарантирует, что вы можете закрыть popover, щелкнув в любом месте страницы. Если вы нажмете на другой кликабельный объект, он скрывает все остальные popovers. Анимация: 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
ответ дан Arijit Lahiri 28 August 2018 в 18:05
поделиться
45
ответ дан Bernard Banta 28 August 2018 в 18:05
поделиться

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

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

Помните, что destroy избавляется от элемента, поэтому селекторная часть важна при инициализации popovers.

0
ответ дан bryanjj 28 August 2018 в 18:05
поделиться

Модифицированное принятое решение. То, что я испытал, было то, что после того, как некоторые popovers были спрятаны, их нужно было бы дважды щелкнуть, чтобы снова появиться. Вот что я сделал для обеспечения того, чтобы popover ('hide') не вызывался на уже скрытые popovers.

$('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
ответ дан Chisom Daniel Mba 28 August 2018 в 18:05
поделиться

Это задано до здесь . Тот же ответ, который я дал, по-прежнему применяется:

У меня была аналогичная потребность, и я нашел это большое небольшое расширение Twitter Bootstrap Popover Ли Кармайкл, названный BootstrapX - clickover . Он также имеет некоторые примеры использования здесь . В основном это изменит popover на интерактивный компонент, который закроется, когда вы нажмете в другом месте на странице или на кнопке закрытия внутри popover. Это также позволит открывать сразу несколько popovers и множество других приятных функций.

3
ответ дан Community 28 August 2018 в 18:05
поделиться

Ответ от @guya работает, если у вас нет что-то вроде datepicker или timepicker в popover. Чтобы это исправить, это то, что я сделал.

if (typeof $(e.target).data('original-title') === 'undefined' && 
    !$(e.target).parents().is('.popover.in')) {
        var x = $(this).parents().context;
        if(!$(x).hasClass("datepicker") && !$(x).hasClass("ui-timepicker-wrapper")){
            $('[data-original-title]').popover('hide');
        }
}
0
ответ дан dbinott 28 August 2018 в 18:05
поделиться

Согласно http://getbootstrap.com/javascript/#popovers ,

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

Используйте триггер фокусировки, чтобы отклонять popovers при следующем щелчке, который пользователь делает .

$('.popover-dismiss').popover({
    trigger: 'focus'
})
3
ответ дан effe 28 August 2018 в 18:05
поделиться
32
ответ дан guya 28 August 2018 в 18:05
поделиться

Вы также можете использовать пузырьки событий, чтобы удалить всплывающее окно из DOM.

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

В вашем html добавьте класс .popover-close к содержимому внутри popover, которое должно закрыть popover.

2
ответ дан Hendrik 28 August 2018 в 18:05
поделиться
jQuery("#menu").click(function(){ return false; });
jQuery(document).one("click", function() { jQuery("#menu").fadeOut(); });
2
ответ дан hienbt88 28 August 2018 в 18:05
поделиться

Это поздно для вечеринки ... но я думал, что поделюсь ею. Мне нравится popover, но у него так мало встроенных функций. Я написал расширение бутстрапа .bubble (), это все, что мне хотелось бы, чтобы это было. Четыре способа уволить. Нажмите на кнопку «Вперед», перейдите по ссылке, нажмите X и нажмите «побег».

Он автоматически позиционируется, чтобы он никогда не удалялся по странице.

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

Это не беспроигрышная самопомощь ... Я много раз хватался за код других людей в своей жизни, я хотел предложить свои собственные усилия. Дайте ему вихрь и посмотрите, работает ли оно для вас.

3
ответ дан Itumac 28 August 2018 в 18:05
поделиться

Хорошо, это моя первая попытка фактически ответить на что-то в stackoverflow, поэтому здесь ничего не происходит: P

Похоже, что не совсем ясно, что эта функциональность действительно работает из коробки в последней загрузочной загрузке (ну, если вы готовы пойти на компромисс , где пользователь может щелкнуть. Я не уверен, что вам нужно поместить «клик по ходу», но на iPad, щелчок работает как переключатель .

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

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

0
ответ дан Ivan Portugal 28 August 2018 в 18:05
поделиться

Мы выяснили, что у нас была проблема с решением от @mattdlockyer (спасибо за решение!). При использовании свойства selector для конструктора popover, подобного этому ...

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

... предлагаемое решение для BS3 не будет работать. Вместо этого он создает второй экземпляр popover, локальный для своего $(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'); создаст второй экземпляр из-за делегированного прослушивателя. Решение предоставило только скрытые popovers, которые уже были созданы.

Надеюсь, я смогу сэкономить вам время.

2
ответ дан kernel 28 August 2018 в 18:05
поделиться

это решение избавляется от досадного 2-го щелчка при показе popover во второй раз

, протестированного с помощью 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
ответ дан Nik 28 August 2018 в 18:05
поделиться

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

}

это мое решение для него .

0
ответ дан Oğuzhan Topçu 28 August 2018 в 18:05
поделиться

С помощью бутстрапа 2.3.2 вы можете установить триггер на «фокус», и он просто работает:

$('#el').popover({trigger:'focus'});
17
ответ дан periklis 28 August 2018 в 18:05
поделиться

Я сделал jsfiddle, чтобы показать вам, как это сделать:

http://jsfiddle.net/3yHTH/

Идея состоит в том, чтобы показать popover, когда вы нажимаете кнопку, и скрывать popover, когда вы нажимаете кнопку за пределами кнопки.

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');
});
11
ответ дан Pigueiras 28 August 2018 в 18:05
поделиться

Попробуйте это, это скроется, щелкнув снаружи.

$('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
ответ дан Rakesh Vadnal 28 August 2018 в 18:05
поделиться

Просто добавьте этот атрибут в элемент html, чтобы закрыть popover в следующий клик.

data-trigger="focus"

ссылка из https://getbootstrap.com/docs/3.3/javascript/#popovers

1
ответ дан ravi 28 August 2018 в 18:05
поделиться

Это в основном не очень сложно, но есть некоторые проверки, чтобы избежать сбоев.

Демо (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');
});
18
ответ дан Sherbrow 28 August 2018 в 18:05
поделиться

просто добавьте этот атрибут с помощью элемента

data-trigger="focus"
2
ответ дан siraj k 28 August 2018 в 18:05
поделиться

Я пробовал многие из предыдущих ответов, на самом деле ничего не работает для меня, но это решение:

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

Они рекомендуют использовать якорный тэг not button и заботиться о роли = "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>
1
ответ дан Skandix 28 August 2018 в 18:05
поделиться

, проверенный с 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');
                }
            });
        });
1
ответ дан Sungwook Ji 28 August 2018 в 18:05
поделиться

Bootstrap поддерживает этот :

JS Bin Demo

Конкретная разметка, требуемая для увольнения, next-click

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

2
ответ дан Tanner Perrien 28 August 2018 в 18:05
поделиться

Взяв код Мэтта Локкера, я сделал простой сброс, поэтому dom не покрывается элементом в hide.

Код Мэтта: 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
ответ дан user14174 28 August 2018 в 18:05
поделиться

Кажется, что метод «скрыть» не работает, если вы создаете popover с делегированием селектора, вместо этого нужно использовать «destroy».

Я сделал это так:

$('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
ответ дан Vladimir Dimchev 28 August 2018 в 18:05
поделиться
Другие вопросы по тегам:

Похожие вопросы: