div弹窗（有遮盖层）

2023-10-16 20:46:10

页面内容：

  <div id="operate_result_info" class="operate_success">
  <center>
  <p><font style="font-weight:bold">题目</font></p>
  </center>
  <P style="padding-left: 30px;">    内容</P>
  <input type="button" name="" value="确认阅读" onclick="surrender();"/>
  <input type="button" name="" value="返回修改" onclick="hiddenMessage();"/>

页面触发方法：

function showMessage() {
document.getElementById("operate_result_info2").style.display = "block";
document.getElementById("operate_result_info").style.display = "block";
}
function hiddenMessage() {
document.getElementById("operate_result_info2").style.display = "none";
document.getElementById("operate_result_info").style.display = "none";
}

页面样式：

<style>
div.operate_success{
height: 240px;
width: 600px;
text-align: left;
padding-top: 10px;
line-height: 20px;
background-color: white;
border: 1px solid red;
color: #af6606;
position: absolute;
    z-index: 1;
    top: 120px;
   left: 80px;
   display: none;
}
div.operate_success2{
display:none;
position:absolute;
top:0%;
left:0%;
width:100%;
height:100%;
background-color:white;
z-index:0;
-moz-opacity:0.8;
opacity:.80;
filter:alpha(opacity=80);
}
</style>

大功告成！！！

div弹窗（有遮盖层）