JavaScript的彈出框顯示，背景半透明，我應該怎麼辦

Question

我是一個初學者使用JavaScript和CSS

現在我想創建一個彈出框顯示的消息，同時在html身體是半透明的。但現在我所做的並不是那麼好，我該怎麼辦？

我需要你的幫助

我的代碼如下

HTML代碼

<div id="confirm_box" class="info_box"> 
<div class="info_box confirm_info"> 
    <div class="info_box confirm_title">{$confirmTitle}</div> 
    <div class="info_box confirm_close"> 
     <span id="confirm_close" class="info_box confirm_close">×</span> 
    </div> 
</div> 

<div id="info_box_content" class="info_box confirm_content"> 
    <div class="info_box info_img_box"> 
     <img src="{$url_app_dir}img/confirm_dog.png" class="info_box confirm_img"/> 
    </div> 
    <div id="content_box" class="info_box content_box"> 
    {$confirmContent}<label id="info_box_text" class="info_box info_text"></label> 
    </div> 
</div> 
<div class="info_box confirm_button"> 
    <button class="info_box confirm_submit" >確認</button> 
</div> 

js代碼

window.onload = function() 
{ 
var confrimWin = document.getElementById("confirm_box"); 
var comfirmBtn = document.getElementById("show_confirm_box"); 
var closeBtn = document.getElementById("confirm_close"); 
var bodyElement = document.getElementsByTagName("body")[0]; 
//show pop-up box 
comfirmBtn.onclick = function() 
{   
    confrimWin.style.display = "block";  
    bodyElement.setAttribute('class',"body_mask"); 

    var text = document.getElementById("name").value;  
    document.getElementById("info_box_text").innerHTML= text ; 
}; 
//close box 
closeBtn.onclick = function() 
{ 
    confrimWin.style.display = "none"; 
    bodyElement.setAttribute('class',""); 
} 

//get mouse Object 
document.onclick = function(){ 
    var e = arguments[0] || window.event; 
    var eventSource = e.srcElement||e.target; 
    var isShow = eventSource.className.toLowerCase().indexOf('info_box'); 

    if(eventSource.className == 'btn'){ 
     comfirmBtn.onclick(); 
    } 
    else if(isShow < 0) 
    { 

     confrimWin.style.display = "none"; 
     bodyElement.setAttribute('class',""); 
    } 
} 

};

HTML代碼

#confirm_box{ 
position:fixed; 
top:50%; 
left:50%; 
width:500px; 
height:300px; 
border-radius: 5px 5px 5px 5px; 
background:#fff; 
z-index:100; 
border:4px solid rgb( 220,220,220); 
margin:-102px 0 0 -202px; 
display:none; 
} 

.body_mask{ 
position: fixed; 
background-color: none repeat scroll 0% 0% rgb(128,128,128); 
opacity: 0.75; 
/* z-index: 100; */ 
display:block; 
} 
.confirm_info{ 
font-size:16px; 
text-align:right; 
background:#fff; 
border-bottom:1px solid rgb(135,180,250); 
padding:5px; 
height:20px; 
} 
.confirm_title { 
font-family:"微軟雅黑","黑體"; 
float:left; 
font-weight: bold; 
color:rgba(30, 144, 255, 0.75); 
} 
.confirm_close { 
float:right; 

} 
.confirm_close span{ 
font-size:16px; 
color:#fff; 
cursor:pointer; 
background:rgb(135,180,250); 
border:1px solid rgba(30, 144, 255, 0.75); 
padding:0 2px; 
} 

.confirm_content{ 
font-family:"微軟雅黑","黑體"; 
font-size: 14px; 
line-height: 24px; 
padding:5px; 
height:70%; 
width:100%; 
} 
.info_text{ 
font-family:"微軟雅黑","黑體"; 
color: rgb(0, 108, 202); 
line-height: 24px; 
height:70%; 
width:100%; 
} 
.info_img_box{ 
float:left; 
width: 200px; 
height: 200px; 
} 
.content_box{ 
float:left; 
width: 230px; 
height: 200px; 
} 
.confirm_button{ 
background:#C4C4C4; 
border:1px solid rgba(30, 144, 255, 0.75); 
} 
.confirm_submit { 
float:right; 
font-size: 15px; 
width: 80px; 
height:30px; 
cursor:pointer; 
color: rgb(255,245,238); 
padding: 0px 10px; 
margin:8px 10px; 
border-radius: 5px 5px 5px 5px; 
/* text-shadow: 1px 1px 3px rgb(255, 255, 255); */ 
border: 1px solid rgb(135,170,230); 
background: -moz-linear-gradient(center top , rgb(135,180,250),rgb(135,180,250)) repeat scroll 0% 0% transparent; 
} 
.confirm_submit:hover { 
background: none repeat scroll 0% 0% rgb(135,160,230); 
} 

Answer 1

與JavaScript的& CSS初學者，我再次嘗試解決問題，並again.and最後sovled它在一個不那麼prefert方式

下面

就是我改變的代碼，它比以前更好

#confirm_box{ 
position:fixed; 
top:50%; 
left:50%; 
width:500px; 
height:300px; 
border-radius: 5px 5px 5px 5px; 
background:#fff; 
border:4px solid rgb( 220,220,220); 
margin:-102px 0 0 -202px; 
z-index: 1002;/*this add css code will show confirm_box upon body_mask*/ 
display:none; 
} 

HTML代碼

<div id="confirm_box" class="info_box"> 
</div> 
<div id="hide_info_box" class="body_mask"></div> 

JavaScript代碼

window.onload = function() 
{ 
var confrimWin = document.getElementById("confirm_box"); 
var comfirmBtn = document.getElementById("show_confirm_box"); 
var closeBtn = document.getElementById("confirm_close"); 
var hideElement = document.getElementById("hide_info_box"); 

//show info box 
comfirmBtn.onclick = function() 
{   
    confrimWin.style.display = "block"; 
    hideElement.style.display = "block"; 
    var text = document.getElementById("name").value;  
    document.getElementById("info_box_text").innerHTML= text ; 
}; 

    //close info box 
closeBtn.onclick=hideElement.onclick=function() 
{ 
    confrimWin.style.display = "none"; 
    hideElement.style.display = "none"; 
} 
};