it-swarm.com.ru

Как я могу закрыть бутстрап-поповер с помощью кнопки внутри поповера?

Я сделал jsFiddle , где я использую функцию попутера Twitter загрузки на значке.

<div style="margin-top:200px">
    <ul>
        <li class="in-row">
            <a href="#" id="meddelanden" data-title="Meddelanden" data-toggle="clickover" 
            data-placement="right"><i class="icon-globe"></i></a>
        </li>
    </ul>
</div>

jQuery:

var elem = '<div class="well"><a href="google.com">Message one, From someone.</a></div>'+
    '<div class="well"><a href="google.com">Message one, From someone.</a></div>'+
    '<button id="close-popover" class="btn btn-small btn-primary pull-right">Close please!</button>';

$('#meddelanden').popover({animation:true, content:elem, html:true});

Кажется, я не могу закрыть поповер с кнопкой внутри. Я попытался сделать функцию щелчка jquery на id "close-popover", но замечание происходит. (Я не включил мою попытку закрыть его внутри jsfiddle)

Любые предложения о том, как вы можете закрыть поповер с помощью кнопки внутри поповера?

С уважением, Билл

9
XT_Nova

Попробуйте это: - http://jsfiddle.net/6hkkk/

var elem = '<div class="well"><a href="google.com">Message one, From someone.</a></div>'+
    '<div class="well"><a href="google.com">Message one, From someone.</a></div>'+
    '<button id="close-popover" data-toggle="clickover" class="btn btn-small btn-primary pull-right" onclick="$(&quot;#meddelanden&quot;).popover(&quot;hide&quot;);">Close please!</button>';



$('#meddelanden').popover({animation:true, content:elem, html:true});
8
PSL

Как насчет небольшого щелчка мышью?

<button onclick="$('#meddelanden').popover('hide');" class="btn btn-small btn-primary pull-right">Close please!</button>

Или как насчет функции:

<button onclick="close_please();" class="btn btn-small btn-primary pull-right">Close please!</button>

с...

function close_please() {
    $('#meddelanden').popover('hide');
}

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

$('#meddelanden').popover({animation:true, content:elem, html:true});
$('#close-popover').bind('click', function(){
    $('#meddelanden').popover('hide');
});
3
jon__o

Предыдущие примеры имеют два основных недостатка:

  1. Кнопка «закрыть» должна каким-то образом знать идентификатор идентифицируемого элемента.
  2. Необходимость добавления в событие «selected.bs.popover» прослушивателя «щелчка» к кнопке закрытия; что также не является хорошим решением из-за того, что вы будете добавлять такого слушателя каждый раз, когда отображается «popover».

Ниже приведено решение, которое не имеет таких недостатков.

По умолчанию элемент «popover» вставляется сразу после элемента-ссылки в DOM (затем обратите внимание, что элемент-ссылка и элемент-поповер являются непосредственными элементами одного уровня). Таким образом, когда нажата кнопка «закрыть», вы можете просто найти ближайшего к нему родителя «div.popover», а затем найти непосредственно предшествующий элемент родственного элемента такого родителя.

Просто добавьте следующий код в обработчик onclick кнопки close:

$(this).closest('div.popover').prev().popover('hide');

Пример:

var genericCloseBtnHtml = '<button onclick="$(this).closest(\'div.popover\').prev().popover(\'hide\');" type="button" class="close" aria-hidden="true">&times;</button>';

$loginForm.popover({
    placement: 'auto left',
    trigger: 'manual',
    html: true,
    title: 'Alert' + genericCloseBtnHtml,
    content: 'invalid email and/or password'
});
2
user2957865

Альтернатива без вызова функции по клику:

Javascript

var $popoverParent = $('.popover-parent').popover();

//allow to close when close button clicked
//register listener before popover shown
$popoverParent.on('shown.bs.popover', function()
{
    //get the actual shown popover
    var $popover = $(this).data('bs.popover').tip();

    //find the close button
    var $closeButton = $popover.find('.close-btn');

    $closeButton.click(function(){
        $popoverParent.popover('hide');
    });
});

//show your popover
$popoverParent.popover('show');
0
Sabrina Leggett

Поместите это в заголовок вашего конструктора popover ...

'<button class="btn btn-danger btn-xs pull-right"
onclick="$(this).parent().parent().parent().hide()"><span class="glyphicon
glyphicon-remove"></span></button>some text'

... чтобы получить маленькую красную кнопку "х" в правом верхнем углу

//$('[data-toggle=popover]').popover({title:that string here})

я даю тот же ответ https://stackoverflow.com/a/23556160/3603692 Я надеюсь, что это разрешено.

0
housecarl

попробуй это:

<input type="button" onclick="$(this).parent().hide();" value="close">

передавая $ (this), вы ссылаетесь на кнопку, а родитель ссылается на элемент, в котором находится кнопка

0
Patrick McWilliams