I am working on implementing an alert message box using HTML and CSS.
Below is the code I have so far:
<div class="dim" id="msg">
<div class="dialog_wrapper">
<div class="dialog" id="msg_value"></div>
</div>
</div>
CSS:
.dim {
height: 100%;
width: 100%;
position: fixed;
left: 0;
display: none;
top: 0;
z-index: 1 !important;
background-color: black;
filter: alpha(opacity=75); /* internet explorer */
-khtml-opacity: 0.75; /* khtml, old safari */
-moz-opacity: 0.75; /* mozilla, netscape */
opacity: 0.75; /* fx, safari, opera */
}
.dialog_wrapper {
opacity: 1;
-moz-opacity: 1;
-khtml-opacity: 1;
filter: alpha(opacity=100);
width: 100%;
top: 40%;
left: 0px;
position: absolute;
z-index: 5;
display: block;
}
.dialog {
opacity: 1;
-moz-opacity: 1;
-khtml-opacity: 1;
filter: alpha(opacity=100);
width: 400px;
height: 10%;
margin: 0 auto;
padding: 40px;
background-color: #fff;
border: 1px solid #ccc;
color: #333;
}
The issue lies in the usage of the `filter:alpha` property for both the background and message box. I want to apply this filter only to the background and not the message box. How can I achieve this?
Thank you.