ホーム
/
bootstrap
/
ポップアップでコメント表示する簡単！お気に入り追加ボタンをbootstrap popoverで作成するサンプル

bootstrap popover

ポップアップでコメント表示する簡単！お気に入り追加ボタンをbootstrap popoverで作成するサンプル

投稿日: 2016年9月11日2018年9月12日投稿者: kishiken

ボタンを押すとポップアップのコメントを出せる、
ECサイトなどでよくあるお気に入りに追加するボタンを作ってみます。

bootstrapに最初から用意されているpopover.jsを用いたサンプルです。

動作としては、

クリックするとポップアップが表示される
ポップアップ内に追加されたメッセージが表示される
3秒後にポップアップが消える
1回クリックボタンがクリック出来なくなります。

動作サンプル

サンプルはこちら

ライトプラン　詳細はこちら

HTMLコード

<div class="container">
  <section>
    <p>
      <button type="button" class="btn btn-default hoge" data-toggle="popover" data-content="お気に入りリストに追加しました" data-placement="top">
        <span class="glyphicon glyphicon-heart text-danger" aria-hidden="true"></span>お気に入りに追加
      </button>
    </p>
    <p>クリックするとポップアップが表示され、ポップアップ内に追加されたメッセージが表示され、3秒後にポップアップが消え、ボタンがクリック出来なくなります。</p>
  </section>
</div>

jqueryコード

<script src="../common/js/jquery-1.11.3.min.js"></script>
<script src="../common/js/bootstrap.js"></script>
<script>
$(document).ready(function(){
    $(".hoge").click(function(){
        
      if($(this).hasClass("disabled")){
        void(0);
      }else{
        $("[data-toggle='popover']").popover('show');
        setTimeout(function(){
             $("[data-toggle='popover']").popover('destroy');
        },3000);
        $(this).addClass("disabled");
        $(this).text("お気に入りに追加済み");
      }
        
    });
});
</script>