首页 > 其他 > 详细

div弹窗(有遮盖层)

时间:2014-01-16 00:19:37      阅读:609      评论:0      收藏:0      [点我收藏+]

页面内容:

  <div id="operate_result_info" class="operate_success">
  <center>
  <p><font style="font-weight:bold">题目</font></p>
  </center>
  <P style="padding-left: 30px;">&nbsp;&nbsp;&nbsp;&nbsp;内容</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弹窗(有遮盖层)

原文:http://www.cnblogs.com/li420773690/p/3517217.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!