Edited at

HTMLで吹き出し風のTipsみたいなのを表示する

More than 1 year has passed since last update.

吹き出し風の画面を Android の Toast みたいなノリで表示したかったので、

調べたことを整理がてらメモします。


開発環境及び動作環境


  • OS: Windows 7 x64

  • Browser: Chrome 61.0.3163.79


DEMO

DEMO


吹き出しを作る

まずは CSS で吹き出しを作ります。


style.css

.balloon-left {

position: absolute;
display: inline-block;
margin-left: 20px;
padding: 7px 10px;
min-height: 40px;
min-width: 120px;
line-height: 40px;
background: #5cc507;
box-shadow: -4px 4px 8px -1px #999999;
}

.balloon-left:before{
content: "";
position: absolute;
top: 50%;
left: -30px;
margin-top: -15px;
border: 15px solid transparent;
border-right: 15px solid #5cc507;
}

.balloon-left p {
margin: 0;
padding: 0;
}


それをHTMLに設定します。


index.html

<button id="button">SHOW</button>

<div id="balloon-tips" class="balloon-left">
<p>吹き出し風Tips</p>
</div>


フェードイン/フェードアウト

CSS でアニメーションを作ります。


style.css

.fadein {

opacity: 0;
visibility: hidden;
transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
}

.fadein.visible {
opacity: 1;
visibility: visible;
}


それをタグに適用します。


index.html

  <button id="button">SHOW</button>

- <div id="balloon-tips" class="balloon-left">
+ <div id="balloon-tips" class="balloon-left fadein">
<p>吹き出し風Tips</p>
</div>


ボタンを押した時に表示されるようにする

あとは、jQueryなり何なりで、クリック処理とclassのON/OFFを行います。


main.js

$(function() {

var timer;
$("#button").on("click", function() {
clearTimeout(timer);
$("#balloon-tips").toggleClass("visible");
timer = setTimeout(function() {
$("#balloon-tips").toggleClass("visible");
}, 3000);
});
});


完成

DEMO

https://github.com/chibi929/chibi-html


参考サイト

CSS3でフェードイン・フェードアウトするダイアログ