.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. Dynamics AX 2012 R3 Demo 安装与配置 - 编译和配置 (Step 3)

        在前两节中,Reinhard主要讲解了如何配置安装环境,安装数据库服务器,AOS和客户端.至此安装工作已经结束,下面Reinhard开始讲解如何编译和配置.     运行客户端后,系统弹出初始 ...

  2. PHPwind高级伪静态规则及方法

    phpwind iis下伪静态规则[ISAPI_Rewrite]RewriteRule ^(.*)/(.*)-htm-(.*)-(.*)\.html$ $1/$2\.php\?$3=$4Rewrite ...

  3. c#链接数据库

    using System; using System.Collections.Generic; using System.Data.SqlClient; using System.Linq; usin ...

  4. 预编译命令 #if DEBUG

    在控制台程序根据预编译命令: http://www.askapache.com/windows/advanced-batch-scripting.html namespace SXGYCarTrans ...

  5. 仿souhu页面设计

    仿搜狐页面设计 Html页面设计代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> ...

  6. 从零开始学习jQuery(转)

    本系列文章导航 从零开始学习jQuery (一) 开天辟地入门篇 从零开始学习jQuery (二) 万能的选择器 从零开始学习jQuery (三) 管理jQuery包装集 从零开始学习jQuery ( ...

  7. file_get_contents微信头像等待时间过长的原因

    UPDATE 2016/05/13 stackoverflow上的解决方法:http://stackoverflow.com/questions/3629504/php-file-get-conten ...

  8. 从零开始CSS(一 2016/9/21)

    1.基础语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. selector {declaration1; declaration2; ... declarationN } 选择器通 ...

  9. Hibernate关联映射之延迟加载

    什么事延迟加载?   当真正需要数据时才执行SQL语句,其本意是减少不必要的性能开销! 之前提到过一个延迟加载的例子: load();结果集不能为空 当真正去打印对象属性时,sql语句才执行! hib ...

  10. HDU-4526 威威猫系列故事——拼车记 动态规划

    分析:该题有2个地方要注意:所有的车要么不坐要么就坐满,这个贪心策略很容易证明是正确的,还有一点就是最后一辆车除外. #include <cstdlib> #include <cst ...