.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. char类型的字节数

    java为:两个字节,C语言中为:1个字节

  2. (转)libcurl应用:如何把下载内容写入内存

    libcurl应用:如何把下载内容写入内存 2008-01-13 00:32:52|  分类: 默认分类 |举报 |字号 订阅   libcurl的文档中有 getinmemory.c这个例子,把下载 ...

  3. NSDate获取当前时区的时间

    [NSDate date]获取的是GMT时间,要想获得某个时区的时间,以下代码可以解决这个问题 NSDate *date = [NSDate date]; NSTimeZone *zone = [NS ...

  4. 理解GRUB2工作原理及配置选项与方法

    GRUB2是借鉴GRUB改写到更加安全强大到多系统引导程序,现在大部分较新的Linux发行版都是使用GRUB2作为引导程序的.GRUB2采用了模块化设计,使得GRUB2核心更加精炼,使用更加灵活,同时 ...

  5. CentOS 7安装Mysql并设置开机自启动

    CentOS 7不带Mysql数据库了,默认的数据库是MariaDB(Mysql的一个分支). 可以按照以下步骤手动安装Mysql数据库. 1. 下载rpm安装文件 wget http://repo. ...

  6. centos6服务器YUM安装LNMP(LINUX+NGINX+MYSQL+PHP)

    之前都用的lamp,这次配置一个lnmp来看看,试试Nginx是不是好用 关闭SELINUXvi /etc/selinux/config#SELINUX=enforcing #注释掉#SELINUXT ...

  7. RMAN的实战篇--备份脚本

    案列一. 目标: 1.每天夜间1 点执行:2.数据库全备,同时备份控制文件及归档日志文件,备份文件保存至: /backup\目录下,并在完成归档日志文件备份后,自动删除已备份的归档日志:3.备份保留7 ...

  8. Delphi TTable 组件

    TTable 是 TDataSet 的派生类,它是基于 BDE 数据库引擎的数据集组件,也是一个较简单的数据组件,可以直接从数据库中获取数据表的数据,只需设置连接的数据库属性(Database) 和所 ...

  9. centos7 安装mysql5.7.16

    1 下载地址http://dev.mysql.com/downloads/mysql/#downloads 2. 解压 -linux-glibc2.-x86_64.tar.gz 3.移动解压出来的文件 ...

  10. USACO2011Brownie Slicing巧克力蛋糕切片

    Description     Bessie烘焙了一块巧克力蛋糕.这块蛋糕是由R*C(1 <= R,C <= 500)个小的巧克力蛋糕组成的. 第i行,第j列的蛋糕有N_ij(1 < ...