首页 > 其他 > 详细

点击后画面弹框背景变灰阴影层

时间:2017-03-28 18:43:55      阅读:677      评论:0      收藏:0      [点我收藏+]

  实现页面功能的时候经常会遇到一个小功能需求:点击画面一个按钮,画面弹出信息页面,同时背景变暗(背景变暗其实是有个灰色半透明的全屏div遮住了原来的页面)且不可操作,信息页面操作关闭后恢复正常。

  先简要理一下(shuo)(ren)(hua)

  • 点击事件之后要呈现半透明灰色背景挡住原页面
  • 灰色背景之上弹出对话框(或是信息页面)
  • 对话框关闭按下之后,对话框消失
  • 灰色背景消失 

 

  html、css方面:

  1. 信息页面得是绝对布局保证弹出位置固定(如果需要绝对居中则增加样式:top:50%;left:50%;margin-top:信息页面高度的一半;margin-left:信息页面宽度的一半);
  2. z-Index属性原页面、阴影层、信息页面依次递增(最大在最上面);
  3. display初始为none;
  4. 背景层div高、宽为100%,颜色、透明度酌情赋值;

  js:

  open(原页面按钮):

    document.getElementById(‘弹框id‘).style.display = "block";

    document.getElementById(‘背景id‘).style.display = "block";

  close(弹框关闭按钮):

    document.getElementById(‘弹框id‘).style.display = "none";

    document.getElementById(‘背景id‘).style.display = "none";

  

点击后画面弹框背景变灰阴影层

原文:http://www.cnblogs.com/codingHeart/p/6636169.html

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