Phone Alert Banner JS
User
Note: our phone systems will be undergoing an upgrade on Thursday 24th April and therefore our phone lines will be unavailable between 9am-1pm. Please kindly call us after this time or email us at enquiries@postmymeds.co.uk.
Please javascript banner for above text with x button display at top of the page
Please javascript banner for above text with x button display at top of the page
Assistant
Here's a simple JavaScript banner that displays the message at the top of the page with a close ("x") button:
### ✅ **HTML + JavaScript (Vanilla):**
Add the following just before the closing “ tag of your HTML:
<div id="phone-alert-banner" style="
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #ffeeba;
color: #856404;
padding: 12px 16px;
text-align: center;
font-family: Arial, sans-serif;
z-index: 9999;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
">
<span>
📞 <strong>Note:</strong> Our phone systems will be undergoing an upgrade on <strong>Thursday 24th April</strong> and therefore our phone lines will be unavailable between <strong>9am-1pm</strong>. Please kindly call us after this time or email us at <a href="mailto:enquiries@postmymeds.co.uk" style="color: #856404; text-decoration: underline;">enquiries@postmymeds.co.uk</a>.
</span>
<button onclick="document.getElementById('phone-alert-banner').style.display='none'" style="
position: absolute;
right: 12px;
top: 8px;
background: none;
border: none;
font-size: 18px;
color: #856404;
cursor: pointer;
">×</button>
</div>### ✅ What this does:
– Displays a sticky banner at the top.
– Includes an ❌ close button.
– Highlights the message in a readable and noticeable style.
Let me know if you want this in jQuery or need to insert it conditionally (e.g., only on certain pages).