လုပ်နည်း - Callout Message
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>
ခေါ်ဆိုမှု မက်ဆေ့ချ်ကို ပိတ်လိုပါက "ကျွန်ုပ်ကို onclickနှိပ်လိုက်သောအခါ၊ ကျွန်ုပ်၏ ပင်မဒြပ်စင်ကို ဝှက်ထားရန်" ဟူသော ရည်ညွှန်းချက်ဖြင့် <span> ဒြပ်စင်ကို ထည့်ပါ - ကွန်တိန်နာ <div> (class="alert") ဖြစ်သည်။
အကြံပြုချက်-× စာလုံး "x" ကို ဖန်တီးရန် HTML entity " " ကိုသုံးပါ။
အဆင့် 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;
}
အကြံပြုချက်- သတိပေးချက် Messages ကိုလည်း စစ်ဆေးပါ ။
အကြံပြုချက်- Notes ကိုလည်း စစ်ဆေးကြည့်ပါ ။