ボタンを押すとポップアップのコメントを出せる、
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>
人気記事ランキング

1
簡単!カレンダーから日付入力 Bootstrap Datepicker の使い方と解説

2
簡単。Bootstrapでアコーディオンパネルを作る方法

3
簡単。Bootstrapでバリデーションチェックができるフォームを作成する方法とサンプル

4
簡単!動画制作 GoPro Splice – iOS ipad iphone対応のアプリの解説・使い方

5
簡単!Bootstrapで作るタブメニュー&ナビゲーション

6
bootstrap カルーセルを少しカスタマイズする方法

7
格安simスマホとガラケーの2台持ちで通信費節約mineo編

8
オバマ大統領や有名芸能人も愛用している腕時計チープカシオ(チプカシ)が話題。