11

アイコンでtwitterブートストラップポップオーバー機能を使用するjsFiddleを作成しました。

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

ポップオーバー内のボタンで閉じることができないようです。ID「close-popover」でjqueryクリック機能を作成しようとしましたが、注意が必要です。(私はそれをjsfiddle内に閉じようとする試みを含めませんでした)

ポップオーバー内のボタンでポップオーバーを閉じる方法について何か提案はありますか?

よろしく、 ビル

4

7 に答える 7

10

これを試してください:- 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});
于 2013-04-26T00:48:38.630 に答える
3

少しだけ onclick はどうですか:

<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');
});
于 2013-04-26T00:18:40.477 に答える
2

前の例には 2 つの主な欠点があります。

  1. 「閉じる」ボタンは、何らかの方法で参照要素の ID を認識する必要があります。
  2. 「shown.bs.popover」イベントに、「クリック」リスナーを閉じるボタンに追加する必要があります。「ポップオーバー」が表示されるたびにそのようなリスナーを追加することになるため、これも良い解決策ではありません。

以下は、そのような欠点のないソリューションです。

デフォルトでは、'popover' 要素は DOM の referenced-element の直後に挿入されます (次に、referenced-element と popover が直接の兄弟要素であることに注意してください)。したがって、「閉じる」ボタンをクリックすると、最も近い「div.popover」親を探し、その親の直前の兄弟要素を探すことができます。

「閉じる」ボタンの「onclick」ハンドラに次のコードを追加するだけです。

$(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'
});
于 2014-06-09T00:38:13.067 に答える
0

これを試して：

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

$(this) を渡すことにより、ボタンを参照し、親はボタンが配置されている要素を参照します

于 2013-04-25T23:48:55.580 に答える
-1

私のサイトには多くのポップオーバーがあり、それらはすべて同じカスタム タイトル バーを持っているため、すべて同じ閉じるボタンがあります。したがって、ID を onclick ハンドラーに渡すことはできません。代わりに、開いているポップオーバーを検索して (一度に開くことができるのは 1 つだけです)、それを閉じることにしました。

function closeMe() {
  $( document ).find('.popoverIsOpen').popover( 'hide' );
}
于 2016-05-19T19:44:29.177 に答える