.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. html5 canvas 笔记五(合成与裁剪)

    组合 Compositing globalCompositeOperation syntax: globalCompositeOperation = type 注意:下面所有例子中,蓝色方块是先绘制的 ...

  2. transient关键字

    transient关键字的英文意思是:瞬态,由此可见是瞬间的,不可固定的. 会不会与对象的状态等等有关系呢? 网上找了一下资料是跟对象的序列化有关. transient的作用 一个对象只要实现了Ser ...

  3. mybatis代码生成(generator工具生成代码)

    generator工具生成代码 下载地址     http://pan.baidu.com/s/1bY8C0I

  4. 【Linux命令与工具】系统资源查看——free、uname、dmesg以及netstat

    free:查看内存的使用情况 用法: free [-b|-k|-m|-g] [-t] 参数: -b: 直接输入free时,显示的单位是KB我们可以使用b(bytes), m(MB), k(KB), g ...

  5. python 学习笔记十二 html基础(进阶篇)

    HTML 超级文本标记语言是标准通用标记语言下的一个应用,也是一种规范,一种标准,它通过标记符号来标记要显示的网页中的各个部分.网页文件本身 是一种文本文件,通过在文本文件中添加标记符, 可以告诉浏览 ...

  6. Cheatsheet: 2015 05.01 ~ 05.31

    .NET .NET on Mac for the OS X n00b without Mono via Visual Studio Code Microsoft frameworks deprecat ...

  7. Zip it

    https://www.codewars.com/kata/zip-it/train/csharp using System; using System.Collections.Generic; us ...

  8. java编写一个可以上下移动的小球:运行后,可以通过上下左右键进行移动

    /* * 功能:加深对事件处理机制的理解 * 1.通过控制上下左右键,来控制一个小球的位置 */package com.test1;import java.awt.*;import javax.swi ...

  9. VPN连接错误800的解决办法

    1,IP填错.2,防火墙太严.3,使用过别的VPN软件.4,服务器上服务里Protected Sqwerrage和Routing and Remote Access这两项是否启动.5,重启电脑,删除原 ...

  10. python ConfigParser配置读写

    一.ConfigParser简介 ConfigParser 是用来读取配置文件的包.配置文件的格式如下:中括号"[ ]"内包含的为section.section 下面为类似于key ...