The inner div's background color is set to white with the parent div's opacity at 0.6. However, the inner div doesn't appear exactly white. The issue disappears when the parent div's opacity is changed to 1.0. Why is that happening? http://jsbin.com/zekacunefi/edit?html,output
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<title>Document</title>
<script src="js/jquery.js"></script>
<style>
#msg_container {
position: fixed;
z-index: 3800;
background-color: #000000;
opacity: 0.6;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
#modalDialog {
display: inline-block;
z-index: 3801;
background-color: white;
position: absolute;
border: 1px solid rgb(103, 103, 103);
box-shadow: 0 4px 17px 0px rgba(0,0,0,0.4);
top: 50%;
left: 50%;
}
body {
background-color: blue;
}
</style>
</head>
<body>
<script>
MessageBox("abc\ndef\ng\nhdasfasdfsdsdfsd");
function MessageBox(str) {
var boxHtml = "<div id='msg_container'><div id='modalDialog'></div></div>";
$("body").append(boxHtml);
var md = $("#modalDialog");
var contentArray = str.split("\n");
var newArray = contentArray.map(function(ele, idx) {
return ele + "<br>";
});
md.html("<p>" + newArray.join("") + "</p>");
var w = md.width(),
h = md.height();
md.css({
marginTop: -1 * h / 2 + "px",
marginLeft: -1 * w / 2 + "px"
});
$("#msg_container").appendTo($("body"));
}
</script>
</body>
</html>