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