Windows XP Message Box with HTML
Written by 4 April 2021
Message boxes are a place to display various and sometimes important information for website users and even to alert them. In this code, the Windows XP message box theme is designed in HTML for those who have a nostalgic mode. You can also define an action for the button to close this text box so it looks and performs exactly like the warning messages in Windows XP.
Code Snippet:
<!-- this script is provided by www.htmlbestcodes.com coded by: Kerixa Inc. -->
<style>
.containter {
width: 350px;
height: 200px;
}
.dialogue {
border-color: #0059F0;
border-style: solid;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
padding: 5px;
}
.top-panel {
background-color: #0059F0;
height: 25px;
border-radius: 15px 15px 0 0;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
color: white;
padding: 5px 0px 0px 9px;
}
button {
float: right;
background-color: #DE5227;
margin-right: 10px;
color: white;
border-radius: 15%;
font-size: 15px;
}
</style>
<div class="containter">
<div class="top-panel">
<strong>Text box</strong>
<button><strong>X</strong></button>
</div>
<div class="dialogue">
<p class="text">Some message here</p>
</div>
</div><a target='_blank' href='www.htmlbestcodes.com' style='font-size: 8pt; text-decoration: none'>Html Best Codes</a>
Example:
Let's stay in touch
Get the latest and greatest javascript codes directly to your mail
TRENDING POST
VISITORS
Online Users:
12
Recent Members:
Jenisha, Mr Joseph Charles, Nikhil 999+, bishalthakur
Comments
Here you can leave us commments. Let us know what you think about this code tutorial!