それらをCSSとピュアなJavaScriptだけで実現してみました。
<!DOCTYPE html>
<html>
<meta charset = "utf-8"></meta>
<style type="text/css">
body {
width: 100%;
margin:0 auto;
text-align: center;
}
button {
text-align: center;
width: 300px;
height: 80px;
border-radius: 10px;
background-color: blue;
color: white;
}
/* style for Toast */
#toast {
visibility: hidden;
z-index: 999;
background-color: rgba(0,0,0,0.8);
color: white;
padding:12px;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
text-align: center;
position: fixed;
top: 0; /* if show bottom, replace to 'bottom: 0;' */
left: 0;
width: 100%;
}
/* style for Popup */
#popup_wrapper {
visibility: hidden;
z-index: 999;
text-align: center;
position: fixed;
top: 50%;
left: 0;
width: 100%;
}
#popup {
visibility: hidden;
z-index: 999;
background-color: rgba(0,0,0,0.8);
color: white;
padding:12px;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
margin: 0 auto;
width: 100px;
}
</style>
<script type="text/javascript">
window.onload = function(){
// Toast
var toast = document.querySelector('#toast');
document.querySelector('#toast_btn').addEventListener('click', function(){
toast.innerHTML = 'Toast!';
toast.style.visibility = 'visible';
// disappear after a few seconds.
setTimeout(function() {
toast.innerHTML = "";
toast.style.visibility = 'hidden';
}, 1000);
});
// Popup
var popup = document.querySelector('#popup');
document.querySelector('#popup_btn').addEventListener('click', function(){
popup.innerHTML = 'Popup!';
popup.style.visibility = 'visible';
// disappear after a few seconds.
setTimeout(function() {
popup.innerHTML = "";
popup.style.visibility = 'hidden';
}, 1000);
});
}
</script>
<body>
<div id="toast"></div>
<div id="popup_wrapper"><p id="popup"></p></div>
<button id="toast_btn">Toast!</button>
<button id="popup_btn">Popup!</button>
</body>
</html>ChromeやFirefoxで試してみてください。スクロールしてもちゃんと適切な位置に表示されていると思います。
ちなみにIEは試してません。IEさえ無視してしまえば、jQueryなどのライブラリを使用しなくても意外にも簡単に実現できるってことですね。
0 件のコメント:
コメントを投稿