bootstrap popover

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

ボタンを押すとポップアップのコメントを出せる、
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>

投稿者:

kishiken

企業務めのWEBデザイナーです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です