Windows XP Message Box with HTML

Written by @kerixa 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 coded by: Kerixa Inc. -->
.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;
<div class="containter">
      <div class="top-panel">
        <strong>Text box</strong>
      <div class="dialogue">
        <p class="text">Some message here</p>
</div><a target='_blank' href='' style='font-size: 8pt; text-decoration: none'>Html Best Codes</a>                                                


About @kerixa

I am Krishna Eydat. I studied Software Engineering at University of Waterloo in Canada. I lead a few tech companies. I am passionate about the way we are connected. I would like to be part of something big or be the big deal!



Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300

Online Users: 12
Recent Members: sahjahan, fk khan, Proper, Jenisha, Mr Joseph Charles
advertisement 2