.message-box{
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.3);
visibility: hidden;
}
.message-box, .message-box-main, .btn{
transition: all 0.5s;
-ms-transition: all 0.5s;
}
.message-box.show{
visibility:visible;
} .message-box.show .message-box-main{
top: 25%;
opacity: 1;
}
.message-box-main{
width: 500px;
background-color: #fff;
position: absolute;
top: 15%;
left: 50%;
margin-left: -250px;
border-radius: 3px;
overflow: hidden;
opacity: 0;
}

  

css3 弹框功能样式的更多相关文章

  1. css3 弹框提示样式

    .common-dialog-box{ opacity: 0; filter: alpha(opacity=0); position: fixed; top: 0%; left: 50%; z-ind ...

  2. js alert(“”)弹框 自定义样式

    首先用css渲染一个样式 #msg{ height: 2rem; text-align: center; position: fixed; top: 50%; margin-top: -1rem; l ...

  3. maximo弹框设置新的功能测试总结

    先介绍下弹框前的准备工作: 1.签名选项——定义系统中可授权的所有功能的唯一标识.定义签名选项是为了授权而已.定义的签名名要和相应的bean类中的方法一致. 2.签名选项中的功能实现,一般都在APPB ...

  4. 考拉Android统一弹框

    作者:钱成杰 背景 在快速开发的背景下,经历了n个版本后的考拉Android App中已经存在了各种各样看似相同却各有差别的弹框样式.其中包括系统弹框和自定义弹框,并且在线上时常会出现IllegalA ...

  5. 仿写confirm和alert弹框

    在工作中,我们常常会遇到原生的样式感觉比较丑,又和我们做的项目风格不搭.于是就有了仿写原生一些组件的念头,今天我就带大家仿写一下confirm和alert样式都可以自己修改. 有些的不好的地方请指出来 ...

  6. CodePush自定义更新弹框及下载进度条

    CodePush 热更新之自定义更新弹框及下载进度 先来几张弹框效果图 非强制更新场景 image 强制更新场景 image 更新包下载进度效果 image 核心代码 这里的热更新Modal框,是封装 ...

  7. jquery点击弹框外层关闭弹框

    $(document).bind("click",function(e){            if($( e.target ).closest(".game-cont ...

  8. 十四、制作优美的div弹框

    功能描述:确认[调整按钮]弹出精美div弹框 1.jsp页面:perfectAlertDiv.jsp <%@ page contentType="text/html;charset=U ...

  9. 【转】如何建立一个样式新颖的CSS3搜索框

    在线演示 搜索框大概是web开发中最常用的UI元素之一,我想基本没有必要去介绍如何使用它.无论是网站还是web应用,都会为了增强用户体验而添加它,那么你是不是也想过设计一个别致的搜索框? 在今天的文章 ...

随机推荐

  1. Maven 使用介绍

    1,创建Project 先去官方网站下载一个最新版本http://maven.apache.org/download.cgi. 下载后解压,使用之前最好先将maven的bin目录设置到path环境变量 ...

  2. ipad开发:二维码扫描,摄像头旋转角度问题解决办法

    之前一直是在手机上开发,用系统原生二维码扫描功能,一点问题都没有,但是在ipad上,用户是横屏操作的,虽然界面旋转了,是横屏的,但是摄像头里显示的依然是竖屏效果,也就是说从摄像头里看到的和人眼看到的内 ...

  3. [问题2014A02] 复旦高等代数 I(14级)每周一题(第四教学周)

    [问题2014A02]  求下列 \(n\) 阶行列式的值, 其中 \(a_i\neq 0\,(i=1,2,\cdots,n)\): \[ |A|=\begin{vmatrix} 0 & a_ ...

  4. 四大开源协议比较:BSD、Apache、GPL、LGPL (转)

    转自:http://www.lupaworld.com/portal.php?mod=view&aid=205552&page=all 本文参考文献:http://www.fsf.or ...

  5. c#委托(1)

    // 委托声明 -- 定义一个签名:delegate double MathAction(double num); class DelegateTest{ // 符合委托声明的常规方法 static ...

  6. PHP创建数据库数据表

    PHP创建数据库数据表 <?php $con = mysql_connect('localhost', 'root', 'root'); /************************在数据 ...

  7. Open source packages on self-driving car

    Autoware https://github.com/CPFL/Autoware.git Open-source software for urban autonomous driving &quo ...

  8. Linux线程的实现 & LinuxThread vs. NPTL & 用户级内核级线程 & 线程与信号处理

    另,线程的资源占用可见:http://www.cnblogs.com/charlesblc/p/6242111.html 进程 & 线程的很多知识可以看这里:http://www.cnblog ...

  9. CSS实现垂直居中

    Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中的确是有vertical-align属性,但是它只对(X)HTML元素中拥有valign特性的元素才生效,例如表格元素中的<td>. ...

  10. Head First 设计模式--1策略模式 组合优于继承

    策略模式:第一了算法族,分别封装起来,让他们之间可以互相替换,次模式让算法的变化独立于使用算法的客户. 首先看个错误的面向对象. 假如我们需要写一个关于鸭子的程序,各种类型的鸭子.第一想到的就是建一个 ...