方法-アラート
CSSを使用してアラートメッセージを作成する方法を学びます。
アラート
アラートメッセージは、危険、成功、情報、警告などの特別なことについてユーザーに通知するために使用できます。
××
危険!危険または潜在的に否定的な行動を示します。
××
成功!成功または前向きな行動を示します。
××
情報!中立的な有益な変更またはアクションを示します。
××
警告!注意が必要な可能性のある警告を示します。
アラートメッセージを作成する
ステップ1)HTMLを追加します。
例
<div class="alert">
<span class="closebtn"
onclick="this.parentElement.style.display='none';">×</span>
This is an alert box.
</div>
アラートメッセージを閉じる機能が必要な場合は、「クリックすると親要素を非表示にする」という属性を持つ<span>要素を追加しonclick
ます。これはコンテナ<div>(class = "alert")です。
ヒント: HTMLエンティティ " ×
"を使用して、文字 "x"を作成します。
ステップ2)CSSを追加します。
警告ボックスと閉じるボタンのスタイルを設定します。
例
/* The alert message box */
.alert {
padding: 20px;
background-color: #f44336; /* Red */
color: white;
margin-bottom: 15px;
}
/* The close button */
.closebtn {
margin-left: 15px;
color: white;
font-weight: bold;
float: right;
font-size: 22px;
line-height: 20px;
cursor: pointer;
transition: 0.3s;
}
/* When
moving the mouse over the close button */
.closebtn:hover {
color: black;
}
多くのアラート
ページに多数のアラートメッセージがある場合は、次のスクリプトを追加して、各<span>要素のonclick属性を使用せずにさまざまなアラートを閉じることができます。
また、アラートをクリックしたときにアラートをゆっくりとフェードアウトさせたい場合は、クラスに追加opacity
してください。transition
alert
例
<style>
.alert {
opacity: 1;
transition: opacity 0.6s; /* 600ms to fade out */
}
</style>
<script>
// Get all elements with class="closebtn"
var close = document.getElementsByClassName("closebtn");
var
i;
// Loop through all close buttons
for (i = 0; i < close.length; i++) {
// When someone clicks on a close button
close[i].onclick =
function(){
// Get the
parent of <span class="closebtn"> (<div class="alert">)
var div = this.parentElement;
// Set the opacity of div to
0 (transparent)
div.style.opacity = "0";
// Hide the div after 600ms
(the same amount of milliseconds it takes to fade out)
setTimeout(function(){ div.style.display = "none"; }, 600);
}
}
</script>
ヒント:メモも確認してください。