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 code

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＆amp; css的初学者，我尝试一次又一次地解决问题。最后以不那么优先的方式解决了这个问题

下面是我更改的代码，它比以前更好

#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"; 
}
};

javascript弹出框显示，背景半透明，我该怎么办

1 个答案: