.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. linux查看磁盘系统df,du

    可以用df命令轻松地查看所有已挂载磁盘的使用情况 df df -h 把输出的文件单位换成文件可读的单位 du 命令显示特定目录的使用情况 du -c 显示总用量 du -h 人类可读性 du -s 每 ...

  2. POJ 2876 Cantoring Along

    Description The Cantor set was discovered by Georg Cantor. It is one of the simpler fractals. It is ...

  3. listivew 动态刷新单个item

    使用ViewHolder来刷新某项数据,而不用每次都全部刷新数据. 继承BaseAdapter,新建ViewHolder类. public class TestListAdapter extends  ...

  4. python学习之if语句

    1.if条件表达式判断 ##判断条件是true or false var1=10 if var1: print("true") print(var1) else: print(&q ...

  5. spring cache

    spring-ehcache.xml文件内容如下: <?xml version="1.0" encoding="UTF-8"?> <beans ...

  6. [转] 浅谈Linux系统的启动流程

    原文:http://blog.csdn.net/justdb/article/details/9621271 版权声明:本文为博主原创文章. Linux系统的启动时通过读取不同的配置文件,执行相应的S ...

  7. Android学习简单总结

    1: 主要的view控件: 文字: TextView 图片: ImgView 视频:SurfaceView ... 2:控件 PopupWindow 实现类似左边导航栏 tabhost实现顶部或者下部 ...

  8. css+div打造三角形(箭头)

    在很多网站都见过这样的箭头,之前我一直以为是图片,直到今天才知道原来可以用css做.开始看代码没太看懂,后来自己试了几遍才恍然大悟.贴出来分享下.(大神请直接忽略) 先看代码: HTML部分就是一个单 ...

  9. selenium 安装与 chromedriver安装

    直接使用pip安装 pip slenium 用 Chrome 浏览器来测试   from selenium import webdriver browser = webdriver.Chrome() ...

  10. wireshark过滤使用

    过滤器的区别 捕捉过滤器(CaptureFilters):用于决定将什么样的信息记录在捕捉结果中.需要在开始捕捉前设置.显示过滤器(DisplayFilters):在捕捉结果中进行详细查找.他们可以在 ...