模态框：
html部分：
弹出框
hhhhh
取消
确认
css部分：
#box{
width: 80px;
height: 40px;
background: #fd7430;
border:none;
border-radius: 5px;
outline: none;
color: #fff;
}
.div-container{
position: fixed;
top: 0%;
width: 100%;
height: 100%;
z-index:;
background: rgba(0,0,0,0.5) !important;/* 兼容ie几不知道，好像ie5 */
background:#000;
filter:Alpha(opacity=60);
}
/*设置div-child的父元素主要是将要此元素的父元素透明特性继承过来，故div-child不会半透明，而是不透明，解决了父元素透明，子元素也透明的bug */
.div-child-container{
position: relative;
width: 400px;
height: 200px;
margin: auto;
top: 30%;
background: #fff;
z-index:; /*z-index要放在父元素之上 */
}
.div-child{
width: 400px;
height: 200px;
margin: auto;
background: #fff;
z-index:; /*z-index要放在父元素之上 */
text-align: center;
}
.div-child span{
position: relative;
top: 40px;
}
.div-child .my-btn{
margin-top: 80px;
}
.div-child .my-btn button{
width: 80px;
height: 40px;
background:#fd7430;
border: none;
border-radius: 5px;
color: #fff;
outline: none;
}
.div-child .my-btn button:first-child(){
margin-right: 20px;
}
JavaScript：
/*按钮弹出模态框*/
function pop_box(){
var container = document.getElementById('div-container');
container.style.display="block";
}
/*取消事件*/
function cancle(){
var container = document.getElementById('div-container');
container.style.display="none";
}
/*确认事件，因为现在没有确认事件，就将弹出框隐藏*/
function confrim(){
var container = document.getElementById('div-container');
container.style.display="none";
}
如有疑问，可留言！
玩转Bootstrap(JS插件篇)-第1章 模态弹出框 :1-3 模态弹出框
模态弹出框(Modals) 这一小节我们先来讲解一个“模态弹出框”,插件的源文件:modal.js. 右侧代码编辑器(30行)就是单独引入 bootstrap 中发布出的“modal.js”文件. 样 ...
UIPresentationController - iOS自定义模态弹出框
参考: /library/archive/featuredarticles/ViewControllerPGforiPhoneOS/Definin ...
玩转Bootstrap(JS插件篇)-第1章 模态弹出框 :1-4 模态弹出框--结构分析
模态弹出框--结构分析 Bootstrap框架中的模态弹出框,分别运用了“modal”.“modal-dialog”和“modal-content”样式,而弹出窗真正的内容都放置在“modal-con ...
玩转Bootstrap(JS插件篇)-第1章 模态弹出框 :1-2 动画过渡
动画过渡(Transitions) 这一小节我们先来讲“动画过渡(Transitions)”这个插件的使用,源文件:transition.js Bootstrap框架默认给各个组件提供了基本动画的过渡 ...
Bootstrap模态弹出框
前面的话 在 Bootstrap 框架中把模态弹出框统一称为 Modal.这种弹出框效果在大多数 Web 网站的交互中都可见.比如点击一个按钮弹出一个框,弹出的框可能是一段文件描述,也可能带有按钮操作 ...
玩转Bootstrap(JS插件篇)-第1章 模态弹出框 :1-1导入JavaScript插件
导入JavaScript插件 Bootstrap除了包含丰富的Web组件之外,如前面介绍的下拉菜单.按钮组.导航.分页等.他还包括一些JavaScript的插件. Bootstrap的JavaScri ...
[Js插件]使用JqueryUI的弹出框做一个“炫”的登录页面
引言 查看项目代码的时候,发现项目中用到JqueryUi的弹出框,可拖拽,可设置模式对话框,就想着使用它弄一个登录页面. 弹出框 在Jquery Ui官网可定制下载弹出框,下载和弹出框下载相关的js文 ...
bootstrap学习--模态弹出框modals轮子
1.点击按钮型 ...
随机推荐
NodeJs支付宝移动支付签名及验签
非常感谢 :/p/8513e995ff3a?utm_campaign=hugo&utm_medium=reader_share&utm_co ...
k.APR通道特殊配置
APR/native specific configuration The following attributes are specific to the APR/native connector. ...
gnuplot使用2
设置图中连线的颜色.宽度.连线样式等 set style line 每个显示终端都有默认的线类型和点类型集合,可以通过在命令行输入: test查看,如下图显示了在wxt终端模式下默认的线的集合和点的集 ...
Winform 窗体最小化隐藏在桌面右下角：转
ICO文件要放到bin\Debug下 1.给主窗体添加NotifyIcon控件 2.窗体加载事件里 privatevoidMainF_Load(objectsender,EventAr ...
关于NRW算法(Quorum算法)
在分布式系统中,冗余数据是保证可靠性的手段,因此冗余数据的一致性维护就非常重要.一般而言,一个写操作必须要对所有的冗余数据都更新完成了,才能称为成功结束.比如一份数据在5台设备上有冗余,因为不知道读数 ...
android ADT Bundle for Mac下载地址
直接下载解压就能用 /sdk/index.html
Bone Collector II(HDU 2639 DP)
Bone Collector II Time Limit: 5000/2000 MS (Java/Others)Memory Limit: 32768/32768 K (Java/Others ...
ng-cli
angluar2 cli 是一个比较好的工具 .解决 Angular 2 环境设置是一大入门门槛,有22%的人说环境设置太过复杂.Angular CLI的诞生,正是为了解决这个问题. 1. 基本介绍 ...
C++ 头文件系列(array)
注意,该头文件仅在C++11中标准才开始出现. 简介 与语言内置的数组一样, array类模版支持几乎所有内置数组包含的特性: 顺序的(sequence) 内存连续的(contiguous stora ...
什么是设计思维Design Thinking——风靡全球的创造力培养方法
“把学习带到现实中,让孩子用自己的力量创造改变,可以直接提升他们的幸福感和竞争力.” 这是“全球孩童创意行动”的发起人——Kiran Sethi在TED演讲时说的一句话,这个行动旨在引导中小学生主动寻 ...
html 原生弹出框 html css和js原生写一个模态弹出框 顺便解决父元素半透明子元素不透明效果...
