कैसे करें - कॉलआउट संदेश
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> (वर्ग = "अलर्ट") है।
युक्ति:×
"x" अक्षर बनाने के लिए HTML निकाय " " का प्रयोग करें ।
चरण 2) सीएसएस जोड़ें:
कॉलआउट बॉक्स और बंद करें बटन को स्टाइल करें:
उदाहरण
/* 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;
}
युक्ति: अलर्ट संदेश भी देखें ।
युक्ति: नोट्स भी देखें ।