div+css+js 实现弹出框，即div 的隐藏与显示

最新推荐文章于 2024-04-20 14:57:38 发布

灼灼桃花夭

最新推荐文章于 2024-04-20 14:57:38 发布

阅读量3.9k

点赞数

分类专栏： js 弹出框文章标签： js 弹出框

本文链接：https://blog.csdn.net/qq_39835505/article/details/89381484

版权

js 同时被 2 个专栏收录

24 篇文章 0 订阅

订阅专栏

弹出框

1 篇文章 0 订阅

订阅专栏

参考网址
https://blog.csdn.net/weixin_37580235/article/details/82291028

它的效果，复制粘贴就能用，我下面附上我自己做的效果代码

效果图
在这里插入图片描述

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>div+css+js实现弹出框</title>
    
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<style>
 
    /*背景层*/
    #popLayer {
        display: none;
        background-color: #B3B3B3;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 10;
        -moz-opacity: 0.8;
        opacity:.80;
        filter: alpha(opacity=80);/* 只支持IE6、7、8、9 */
    }

    /*弹出层*/
    #popBox {
        display: none;
        background-color: #FFFFFF;
        z-index: 11;
        width: 200px;
        height: 200px;
        position:fixed;
        top:0;
        right:0;
        left:0;
        bottom:0;
        margin:auto;
    }

    #popBox .close{
        text-align: right;
        margin-right: 5px;
        background-color: #F8F8F8;
    }

    /*关闭按钮*/
    #popBox .close a {
        text-decoration: none;
        color: #2D2C3B;
    }

</style>
</head>
<body>

// 弹出框
<ba id="carlist" style="position:fixed;z-index:1;width: 100%; height:50%; background:  #AAAAAA;overflow:scroll;"></ba>
<div id="zzc" style="position:absolute;z-index:1;top:50%;width: 100%; height:100%; background: #AAAAAA;filter:alpha(Opacity=60);-moz-opacity:0.6;opacity: 0.6;"></div>

// 触发js 的按钮
<input type="button" id="ceshi" name="popBox" value="弹出框" data-id=1 "popBox(this)">

</body>
</html>

<script type="text/javascript">

	// 加载页面的时候 隐藏div
	$(function(){
		$("#carlist").hide();
	    $("#zzc").hide();
	})

	// 点击按钮的时候 显示div
	 popBox=function(id){
	
	    // alert($(id).attr("data-id"));
	    
		 $("#carlist").show();
	     $("#zzc").show();
	     
	     // 在这追加div数据之前 empty 清空一下
	     
		 var content='<div>测试数据</div>'+'<div>测试数据</div>';
		 $("#carlist").append(content);
	
	 }



	$("#zzc").click(function (){
		$("#carlist").empty();
		$("#carlist").hide();
		$("#zzc").hide();
	})

   
</script>

灼灼桃花夭

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
div+css+js 实现弹出框，即div 的隐藏与显示

参考网址https://blog.csdn.net/weixin_37580235/article/details/82291028它的效果，复制粘贴就能用，我下面附上我自己做的效果代码效果图<!doctype html><html lang="en"><head> <meta charset="UTF-8"> &lt...
复制链接

扫一扫