模态框:

html部分:

<!-- 按钮 -->
<button id="box" onclick="pop_box()">弹出框</button>
<!-- 弹出模态框 -->
<div class="div-container" id="div-container" style="display: none;">
<div class="div-child-container">
<div class="div-child">
<span>hhhhh</span>
<div class="my-btn">
<button id="cancleBtn" onclick="cancle()">取消</button>
<button id="confrim" onclick="confrim()">确认</button>
</div>
</div>
</div>
</div>

css部分:

<style type="text/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;
}
</style>

JavaScript:

<script type="text/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";
}
</script>

如有疑问,可留言!

html、css和js原生写一个模态弹出框,顺便解决父元素半透明子元素不透明效果的更多相关文章

  1. 玩转Bootstrap(JS插件篇)-第1章 模态弹出框 :1-3 模态弹出框

    模态弹出框(Modals) 这一小节我们先来讲解一个“模态弹出框”,插件的源文件:modal.js. 右侧代码编辑器(30行)就是单独引入 bootstrap 中发布出的“modal.js”文件. 样 ...

  2. UIPresentationController - iOS自定义模态弹出框

    参考: https://developer.apple.com/library/archive/featuredarticles/ViewControllerPGforiPhoneOS/Definin ...

  3. 玩转Bootstrap(JS插件篇)-第1章 模态弹出框 :1-4 模态弹出框--结构分析

    模态弹出框--结构分析 Bootstrap框架中的模态弹出框,分别运用了“modal”.“modal-dialog”和“modal-content”样式,而弹出窗真正的内容都放置在“modal-con ...

  4. 玩转Bootstrap(JS插件篇)-第1章 模态弹出框 :1-2 动画过渡

    动画过渡(Transitions) 这一小节我们先来讲“动画过渡(Transitions)”这个插件的使用,源文件:transition.js Bootstrap框架默认给各个组件提供了基本动画的过渡 ...

  5. Bootstrap模态弹出框

    前面的话 在 Bootstrap 框架中把模态弹出框统一称为 Modal.这种弹出框效果在大多数 Web 网站的交互中都可见.比如点击一个按钮弹出一个框,弹出的框可能是一段文件描述,也可能带有按钮操作 ...

  6. bootstrap中的modal 模态弹出框不能放在 form_for里面,一弹出modal会自动submit掉form

    bootstrap中的modal 模态弹出框不能放在 form_for里面,一弹出modal会自动submit掉form

  7. 玩转Bootstrap(JS插件篇)-第1章 模态弹出框 :1-1导入JavaScript插件

    导入JavaScript插件 Bootstrap除了包含丰富的Web组件之外,如前面介绍的下拉菜单.按钮组.导航.分页等.他还包括一些JavaScript的插件. Bootstrap的JavaScri ...

  8. [Js插件]使用JqueryUI的弹出框做一个“炫”的登录页面

    引言 查看项目代码的时候,发现项目中用到JqueryUi的弹出框,可拖拽,可设置模式对话框,就想着使用它弄一个登录页面. 弹出框 在Jquery Ui官网可定制下载弹出框,下载和弹出框下载相关的js文 ...

  9. bootstrap学习--模态弹出框modals轮子

    1.点击按钮型 <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css"> ...

随机推荐

  1. FZU 1924——死锁——————【topo判环】

    死锁 Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Submit Status Pr ...

  2. ajax数据获取与传送

    function service_ajax(){ var migrate_style = $('#myTab').find('.active').attr('value'); //jquery获取页面 ...

  3. 【Linux】linux文件夹打包命令

    .tar 解包:tar xvf FileName.tar 打包:tar cvf FileName.tar DirName (注:tar是打包,不是压缩!) ---------------------- ...

  4. Hashtable元素的遍历

    遍历用到DictionaryEntry(字典键/值对) 实例 创建一个Hashtable对象,向其中添加4个元素,然后遍历 static void Main(string[] args) { Hash ...

  5. nginx配置文件分开配置

    在Linux中不同的用户都可能用到Nginx,如果不同的用户无法达成一个对nginx.conf编写标准,势必会导致nginx.conf里的内容变的相当混乱,极难维护.所以这里建议新建一个文件夹,这个文 ...

  6. mysql三-1:理解存储引擎

    一.什么是存储引擎 mysql中建立的库===>文件夹 库中建立的表===>文件 生活中我们用来存储数据的文件有不同的类型,每种文件类型对应各自不同的处理机制:比如处理文本用txt类型,处 ...

  7. css样式学习小知识

    1. 使用百分比设置宽高 自适用宽高的,有分割的区域,可以适用百分比:30% 70% 如果有一部分是固定的宽度或者高度,可以使用:height: calc( 100% - 36px ); 2. inp ...

  8. textarea高度随着内容的多少而变化,高度可以删减

    问题:可以多行输入,并且输入框的高度随着内容的多少而变化,输入框的高度不能只增不减 由于 input 只能单行输入 textarea可以多行输入,并且高度可以随着内容的增加而增加,但是当内容删减的时候 ...

  9. 学习JVM虚拟机原理总结

    0x00:JAVA虚拟机的前世今生 1991年,在Sun公司工作期间,詹姆斯·高斯林和一群技术人员创建了一个名为Oak的项目,旨在开发运行于虚拟机的编程语言,允许程序多平台上运行.后来,这项工作就演变 ...

  10. JMeter 配置元件之-HTTP Cookie管理器-实现 Cookie 登录

    下面以购物App常用的收藏功能为例,讲述如何在 JMeter 中使用 cookie 进行登录态操作.具体的操作步骤如下所示: 第一步.录制查看收藏列表的 HTTP请求: 录制查看收藏列表的HTTP请求 ...