用CSS和js实现模态框

一时失言乱红尘 2022-07-14 03:21 130阅读 0赞

用CSS和JS改变z-index的属性值就可以实现模态框

<html>
    <head>
    	<title>modal box</title>
    <style type="text/css">
    *{
    	margin:0px;
    	padding:0px;
    }
    </style>
    </head>
    <body>
    
    <div style="background:url(http://pic.90sjimg.com/back_pic/00/04/27/49/5b1eee8bdba7b9aefc62fccafe72737c.jpg);width:100%;height:800px;z-index:1;">
    	<button  id="modal-box">弹框</button>
    	<div id="modal-show" style="position:fixed;z-index:-9999;width:100%;height:100%;background-color:rgba(236, 214, 214, 0.2);">	
    	</div>
    	<div id="modal-show2" style="position:fixed;z-index:-9999;width:30%;height:30%;margin:200px auto;border:1px solid red;">	
    			欢迎你登录
    	</div>
    
    </div> 
    
    <script type="text/javascript">   
    document.getElementById("modal-box").οnclick=function()//点击按钮改变zIndex的值为1让模态框在背景图的前面
    {
    	document.getElementById("modal-show").style.zIndex = "1";
    	document.getElementById("modal-show2").style.zIndex = "1";
    };
    
    document.getElementById("modal-show").οnclick=function()//点击模态框的透明背景时，模态框的zIndex值变为-9999，会隐藏在
    {
       背景图片的后面，点击模态框本身是不会消失的 
    	this.style.zIndex = "-9999";
    	document.getElementById("modal-show2").style.zIndex = "-9999";
    };
    
    
    </script>
    
    </body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，130人围观）

还没有评论，来说两句吧...

相关阅读

相关 php什么是模态框,bootstrap模态框有什么用

Bootstrap Modals(模态框)是使用定制的Jquery 插件创建的。 ![5d2583bead2d9537.jpg][] 它可以用来创建模态窗口丰富用户体验，或

矫情吗；*/ 2023年01月18日 06:55/ 0 赞/ 146 阅读

相关用vue实现模态框组件

基本上每个项目都需要用到模态框组件，由于在最近的项目中，alert组件和confirm是两套完全不一样的设计，所以我将他们分成了两个组件，本文主要讨论的是confirm组件的实

系统管理员/ 2022年09月26日 11:55/ 0 赞/ 163 阅读

相关 bootstrap 模态框

我们需要引入bootstrap.min.js 先创建模态框的触发装置： <button class="btn btn-primary btn-lg" data-to

你的名字/ 2022年08月01日 02:50/ 0 赞/ 333 阅读

相关用CSS和js实现模态框

用CSS和JS改变z-index的属性值就可以实现模态框 <html> <head> <title>modal box</title> <s

一时失言乱红尘/ 2022年07月14日 03:21/ 0 赞/ 131 阅读

相关 JS 模态框实现保存成功提示

JS 文件函数编辑示例 $(function(){ var autoFormSubmit = function(e){

深藏阁楼爱情的钟/ 2022年07月13日 02:53/ 0 赞/ 227 阅读

相关模态框缓冲效果实现

项目模态框是通过ajax异步来获得数据的，这就造成一个问题，当请求过多或数据量太大，数据展现的不是很及时，用户体验不是很好。于是想到通过缓冲效果来增强用户体验。步骤：

客官°小女子只卖身不卖艺/ 2022年07月13日 00:45/ 0 赞/ 140 阅读

相关模态框

点击按钮弹出模态框的实现： html： <!DOCTYPE html> <html> <head> <meta charset="u

淡淡的烟草味﹌/ 2022年05月14日 14:24/ 0 赞/ 251 阅读

相关 bootstrap--模态框

复制即可运行. 小模态框 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta c

╰半橙微兮°/ 2022年02月21日 07:47/ 0 赞/ 403 阅读

相关模态框

模态框模态框，又是一种全新的异空间页面，本篇介绍的模态框开启后，除了窗体、框体之外的内容都被遮住了，点击不了，只能关闭后，其他之前的才能操作。 ![在这里插

爱被打了一巴掌/ 2022年01月26日 11:27/ 0 赞/ 363 阅读

相关 Revit 模态框

非模态窗口有一个好处，就是可以一直停留在程序之前，然后持续完成操作。但是在Revit二次开发中，非模态窗口也有几个注意事项。 1、需要在文档关闭的时候，把非模态窗口也关闭掉，

约定不等于承诺〃/ 2022年01月06日 20:29/ 0 赞/ 291 阅读