下面的demo，无论浏览器大小如何改变，滚动条是否滚动，弹出框永远水平垂直居中

<html>

<head>

	<title></title>

</head>

<style type="text/css">

.wrap{

	  position: absolute;

	  top:0;

	  width: 100%;

	  height: 100%;

	  background-color: #CEC6C6;

	  opacity: 0.75;

	  z-index: 999;

	}

.alertbox{

  position: fixed; /*这是关键*/

  z-index: 1000;

  width: 270px;

  height:163px;

  padding: 20px 0;

  background-color: #fff;

  text-align: center;

  top:50vh;

  margin-top: -100px;

  left: 50%;

  margin-left: -135px;

  border-radius: 5px;

}

  .alertbox h2{

    font-size: 17px;

    color: #030303;

    margin: 0 13px;

  }

  .alertbox p{

    font-size: 13px;

    color: #000;

    margin:8px 13px 40px;

  }

  .alertbox .ok-button{

    position: absolute;

    bottom: 20px;

    width: 100%;

    color:#037AFF;

    font-size: 17px;

    height: 30px;

    line-height: 40px;

    border-top:1px solid #B7B7B7;

    cursor: pointer;

  }

</style>

<body>

	<div class='wrap-box'>

		<div class='wrap'></div>

		<div class='alertbox'><h2>hello</h2>

			<p>hello</p>

			<div class='ok-button'>OK</div>

		</div>

	</div>

</body>

</html>

　　

vh属性-- 一个永远垂直居中的弹出框的更多相关文章

  1. 自定义一个类似UIAlertView的弹出框

    这个是和UIAlertView类似,但是可以自定义view的样式废话不多说,上代码: 首先第一步:创建一个继承自View的类如: #import <UIKit/UIKit.h> @clas ...

  2. sweetalert : 一个比较好看的弹出框

    1.引入 <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"> </script& ...

  3. CCOMBOX下拉弹出框，因属性对话框自动隐藏而弹出框没有隐藏问题

    关于这个问题是可以使用 使其失去焦点 releasecapture()解决的,但是鼠标在下拉列表中的item中经过时,调用releasecapture()后会选中最后mousemove过的item项. ...

  4. [Js插件]使用JqueryUI的弹出框做一个“炫”的登录页面

    引言 查看项目代码的时候,发现项目中用到JqueryUi的弹出框,可拖拽,可设置模式对话框,就想着使用它弄一个登录页面. 弹出框 在Jquery Ui官网可定制下载弹出框,下载和弹出框下载相关的js文 ...

  5. bootstrap中popover.js(弹出框)使用总结+案例

    bootstrap中popover.js(弹出框)使用总结+案例 *转载请注明出处: 作者:willingtolove: http://www.cnblogs.com/willingtolove/p/ ...

  6. vue--vant组件库Dialog弹出框

    安装vant UI框架: cnpm install vant –-save-dev 导入组件-在main.js里: import Vant from 'vant'; import'vant/lib/v ...

  7. (转)微信小程序开发—弹出框

    原文地址 <span style="font-family:Comic Sans MS;font-size:18px;color:#333333;"><view ...

  8. Bootstrap popover弹出框

    popover被挤压.遮挡的问题: 弹出框显示的时候如果贴近一个列的边沿,就会很窄或被遮挡,解决起来很简单,只需在初始化的时候添加一个container属性就可以了: $(function (){ $ ...

  9. WINRAR评估版本弹出框消除

    网上有很多WINRAR评估版本,这些版本下载安装了之后总会有些广告弹出,让人很烦恼,现在教大家一个方法消除这些弹出框. 复制以下代码:    RAR registration data SeVeN U ...

随机推荐

  1. css压缩（一）

    基于require.js的压缩,至于require.js,网上有比较权威的解说 RequireJS进阶(一) RequireJS进阶(二) RequireJS进阶(三) 目前我所做的项目是把各个模块下 ...

  2. 使用unetbootin制作Debian安装U盘

    有时需要在没有光驱的裸机上安装系统,这时我们可以使用unetbootin制作一个系统安装U盘. 1.在网上下载好vmlinuz,initrd.gz,boot.img.gz. 2.然后使用unetboo ...

  3. Linux下grep显示前后几行信息

    Linux下grep显示前后几行信息 标准unix/linux下的grep通过下面參数控制上下文 grep -C 5 foo file 显示file文件里匹配foo字串那行以及上下5行grep -B ...

  4. Visual Studio 2010 简体中文旗舰、专业版（MSDN原版下载）

    Visual Studio 2010 简体中文旗舰.专业版(MSDN原版下载)(Visual Studio 2010 ultimate professional x86 dvd)2010[光盘镜像]- ...

  5. asynchronous-logging-with-log4j-2--转

    原文地址:https://dzone.com/articles/asynchronous-logging-with-log4j-2 Log4J 2 is a logging framework des ...

  6. iOS二十种超酷时尚艺术滤镜汇总【附源码】

    本文总结了20种ios滤镜都是基于GPUImage的,有3种滤镜是GPUImage库中包含的,还有17种是Instagram中的经典滤镜,集成在一个项目中.使用GPUImage可以非常容易创建我们自己 ...

  7. 【第三课】ANR和OOM——贪快和贪多的后果（上）

    恼人的ANR 早先年用Android的时候,就连很多知名的app也总是莫名其妙崩溃,好像手机快的时候会崩溃,手机卡的时候app会卡死.卡死的时候会弹出来一个框,询问是要结束app还是继续等待.这就是A ...

  8. [团队项目] Scrum 项目 3.0 SCRUM 流程的步骤2: Spring 计划

      SCRUM 流程的步骤2: Spring 计划 1. 确保product backlog井然有序.(参考示例图1) 2. Sprint周期,一个冲刺周期,长度定为两周,本学期还有三个冲刺周期. 3 ...

  9. JavaScript--DOM修改元素的属性

    一旦你获得了要修改的元素,可以有2种方式,来读取和修改它的属性:一种老的方式(它被更多的用户代理所支持)和一种新的DOM方法的方式.老的和新的用户代理都允许你以对象属性的方式获取和设置元素的属性. 先 ...

  10. Aspose.Words.Tables.Row类操作word表格行

    http://www.aspose.com/docs/display/wordsnet/Aspose.Words.Tables.Row+Class Retrieves the index of a r ...