html+css+js实现点击xxx出现弹窗

最新推荐文章于 2023-07-21 14:08:03 发布

junLin天下

最新推荐文章于 2023-07-21 14:08:03 发布

阅读量1.8w

点赞数 11

分类专栏：前端

原文链接：https://blog.csdn.net/weixin_37580235/article/details/82291028?utm_medium=distribute.pc_relevant.none-task-blog-utm_term-4&spm=1001.2101.3001.4242

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

这个博主写的特别详细，比较好用。

这里不光是可以按钮，针对文字和图片也是可以的：

效果：
点击弹出框按钮后，页面上显示一个弹出框，并且背景要变成灰色，原始页面不能被操作的，直到关闭弹出框。
原理：
在原页面的基础上添加两个格，一个是弹出层，一个是遮罩层，即背景层。这两个div和原始页面是在一个文件中，首先通过设置display：none;让这两个div不显示，然后通过给弹出框按钮和关闭按钮绑定事件来实现弹出框的显示和隐藏;
实现：
1。先实现页面布局;一个弹出框按钮，一个背景层，一个弹出层，一个关闭按钮。

<input type="button" name="popBox" value="弹出框" οnclick="popBox()">
<div id="popLayer"></div>
<div id="popBox">
    <div class="close">
        <a href="javascript:void(0)" οnclick="closeBox()">关闭</a>
    </div>
    <div class="content">我是弹出层</div>
</div>

2.设置弹出层和背景层的display属性为none;让他们默认隐藏不显示;

3.先给两个div设置背景颜色，方便查看;

4.设置背景层的定位;

position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;

5.设置弹出层的显示大小，并且居中显示;

width: 200px;
height: 200px;
position:fixed;
top:50%;
left:50%;
transform:translateX(-50%) translateY(-50%);

6.使用z-index属性设置背景层和弹出层的上下位置，值越大越靠上显示;

7.设置背景层的透明度;

8.对关闭按钮的样式做调整;哦了。

完整代码：

<!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="js/jquery-3.3.1.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>
<input type="button" name="popBox" value="弹出框" οnclick="popBox()">
<div id="popLayer"></div>
<div id="popBox">
    <div class="close">
        <a href="javascript:void(0)" οnclick="closeBox()">关闭</a>
    </div>
    <div class="content">我是弹出层</div>
</div>
<script>
    /*点击弹出按钮*/
    function popBox() {
        var popBox = document.getElementById("popBox");
        var popLayer = document.getElementById("popLayer");
        popBox.style.display = "block";
        popLayer.style.display = "block";
    };
 
    /*点击关闭按钮*/
    function closeBox() {
        var popBox = document.getElementById("popBox");
        var popLayer = document.getElementById("popLayer");
        popBox.style.display = "none";
        popLayer.style.display = "none";
    }
</script>
</body>
</html>

junLin天下

关注

11
点赞
踩
35

收藏

觉得还不错? 一键收藏
1
评论
html+css+js实现点击xxx出现弹窗

这个博主写的特别详细，比较好用。这里不光是可以按钮，针对文字和图片也是可以的：效果：点击弹出框按钮后，页面上显示一个弹出框，并且背景要变成灰色，原始页面不能被操作的，直到关闭弹出框。原理：在原页面的基础上添加两个格，一个是弹出层，一个是遮罩层，即背景层。这两个div和原始页面是在一个文件中，首先通过设置display：none;让这两个div不显示，然后通过给弹出框按钮和关闭按钮绑定事件来实现弹出框的显示和隐藏;实现：1。先实现页面布局;一个弹出框按钮，一个背景层，一个弹出层，一个关闭按..
复制链接

扫一扫