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 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:


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!

K
TRENDING POST
1
2
3
4
5
VISITORS
Online Users: 12
Recent Members: Nikhil 999+, bishalthakur
advertisement 2