目次
概要
シンプルなポップアップ通知を作ってみました！
滅多にアップデートしてない、WEBアプリ(https://mitumorikun.net/)にも実装予定です。
余計な機能はつけていないため、比較的わかりやすいものになっています。
参考になれば幸いです。
コード
メソッド：pop()に引数で通知内容渡すことで、内容を自由に指定できます。
JSとCSSをコピペすれば、すぐに使用いただけると思います！
全体
<!DOCTYPE html>
<html>
<head>
<title>ポップアップ通知</title>
</head>
<script>
function pop(mes) {
const newDiv = document.createElement("div");
const newh5 = document.createElement("h5");
const newbtn =document.createElement("button");
const newContent = document.createTextNode(mes);
newDiv.appendChild(newbtn);
newDiv.appendChild(newh5);
newh5.appendChild(newContent);
newDiv.id = 'pop';
newbtn.id = 'close';
newbtn.addEventListener('click', del);
newbtn.textContent = 'X';
document.body.appendChild(newDiv);
}
function del(){
const div = document.getElementById('pop');
div.remove();
}
</script>
<body>
<button onclick="pop('【通知】本日は雨です。傘を持って行った方が良いでしょう。')">通知を表示</button>
</body>
<style>
@keyframes slideInRight {
from {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
#pop h5{
width: 300px;
height: 70px;
padding-top: 3px;
padding-left: 3px;
border-radius: 10px;
background-color: rgb(222, 220, 224);
box-shadow: 6px 6px 10px 0px rgba(0, 0, 0, 0.4);
}
#pop {
display: flex;
justify-content: flex-end;
animation: slideInRight 0.5s ease-out;
}
#close {
position: absolute;
justify-content: flex-end;
width: 20px;
height: 20px;
border-radius: 5px;
background-color: rgb(222, 220, 224);
border: none;
text-align: center;
}
</style>
</html>HTML
<!DOCTYPE html>
<html>
<head>
<title>ポップアップ通知</title>
</head>
<link rel="stylesheet" type="text/css" href="./pop.css">
<script src="./pop.js"></script>
<body>
<button onclick="pop('【通知】本日は雨です。傘を持って行った方が良いでしょう。')">通知を表示</button>
</body>
</html>JavaScript
function pop(mes) {
const newDiv = document.createElement("div");
const newh5 = document.createElement("h5");
const newbtn =document.createElement("button");
const newContent = document.createTextNode(mes);
newDiv.appendChild(newbtn);
newDiv.appendChild(newh5);
newh5.appendChild(newContent);
newDiv.id = 'pop';
newbtn.id = 'close';
newbtn.addEventListener('click', del);
newbtn.textContent = 'X';
document.body.appendChild(newDiv);
}
function del(){
const div = document.getElementById('pop');
div.remove();
}
CSS
@keyframes slideInRight {
from {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
#pop h5{
width: 300px;
height: 70px;
padding-top: 3px;
padding-left: 3px;
border-radius: 10px;
background-color: rgb(222, 220, 224);
box-shadow: 6px 6px 10px 0px rgba(0, 0, 0, 0.4);
}
#pop {
display: flex;
justify-content: flex-end;
animation: slideInRight 0.5s ease-out;
}
#close {
position: absolute;
justify-content: flex-end;
width: 20px;
height: 20px;
border-radius: 5px;
background-color: rgb(222, 220, 224);
border: none;
text-align: center;
}
DEMO
まとめ
今回効果音なしですが、効果音があるとよりそれっぽくなるのではないでしょうか。
CSSのアニメーションをいじると、また違った感じになると思います。
アレンジしてみてください。
コメント、Xでアレンジ版を教えてもらえると嬉しいです。
