方法-コールアウトメッセージ
CSSを使用してコールアウトメッセージを作成する方法を学びます。
叫ぶ
コールアウトメッセージは、多くの場合、ページの下部に配置され、ユーザーに特別なこと(ヒント/トリック、割引、必要なアクションなど)について通知します。
コールアウトを作成する
ステップ1)HTMLを追加します。
例
<div class="callout">
<div class="callout-header">Callout
Header</div>
<span class="closebtn" onclick="this.parentElement.style.display='none';">×</span>
<div class="callout-container">
<p>Some text...</p>
</div>
</div>
コールアウトメッセージを閉じる機能が必要な場合は、「クリックすると親要素を非表示にする」という属性を持つ<span>要素を追加しonclick
ます。これはコンテナ<div>(class = "alert")です。
ヒント: HTMLエンティティ " ×
"を使用して、文字 "x"を作成します。
ステップ2)CSSを追加します。
コールアウトボックスと閉じるボタンのスタイルを設定します。
例
/* Callout box
- fixed position at the bottom of the page */
.callout {
position: fixed;
bottom: 35px;
right: 20px;
margin-left: 20px;
max-width: 300px;
}
/* Callout header */
.callout-header {
padding: 25px
15px;
background: #555;
font-size: 30px;
color: white;
}
/* Callout container/body */
.callout-container
{
padding: 15px;
background-color:
#ccc;
color: black
}
/* Close button */
.closebtn {
position:
absolute;
top: 5px;
right: 15px;
color: white;
font-size: 30px;
cursor: pointer;
}
/* Change color on
mouse-over */
.closebtn:hover {
color: lightgrey;
}
ヒント:アラートメッセージも確認してください。
ヒント:メモも確認してください。