js+html+css+jquery实现简单的弹框

最新推荐文章于 2023-11-30 10:33:28 发布

置顶迷雾中的夜行白马

最新推荐文章于 2023-11-30 10:33:28 发布

阅读量550

点赞数 1

本文链接：https://blog.csdn.net/weixin_42241626/article/details/105826685

版权

前端自定义弹框专栏收录该内容

1 篇文章 0 订阅

订阅专栏

css代码

 #divcss5 {
            margin: 0 auto;
            width: 300px;
            position: relative;
            top: 4%;
        }

        #home {
            width: 300px;
            height: 150px;
            cursor: pointer;
            border: 1px solid ghostwhite;
            position: fixed;
            margin: 0 auto;
            background-color: mistyrose;
        }

        .tips {
            line-height: 24px;
            background-color: gainsboro;
        }

        .dataTxt {
            text-align: center;
            height: 80px;
            width: 100%;
            position: relative;
        }

        .hand {
            cursor: pointer
        }

js代码

    a();
    function a() {
        create_temp(null, '哈哈哈', null)
    }

    // 点击开启弹框 设置参数
    function btn(obj) {
        let title = "弹框自定义纯js/html";
        let _this = $(obj);
        // 创建模板 看自己需求传参 1当前元素指向this 2 提示的内容 3 方法
        create_temp(_this, title, del);
    }

    // 定义方法的全局变量
    let funData = null;
    // 定义指向的全局变量
    let _this = null;

    // 创建dom模板
    function create_temp(obj, data, fun) {
        if (obj !== null) {
            _this = $(obj);
        }
        let temp = "<div id=\"home\">\n" +
            "<div class='tips'><span style=\"float: left\">提示</span>" +
            "<span class='hand' style=\"position: relative;left: 83%;\" οnclick='btnNo()'>X</span></div>\n" +
            "<hr style=\"position: relative;top: -8px;\"/>\n" +
            "<div class='dataTxt'>" + data + "</div>\n" +
            "<div style=\"text-align: center\">";
        if (fun !== null && fun !== '') {
            funData = fun;
            temp += "<button id='btnYes' class='hand' οnclick='funData(_this)'>确认</button>\n" +
                "<button id='btnNo' class='hand' οnclick='btnNo()'>取消</button>\n" +
                "</div>\n" +
                "</div>";
        } else {
            temp += "<button id='btnYes' class='hand'>确认</button>\n" +
                "<button id='btnNo' class='hand' οnclick='btnNo()'>取消</button>\n" +
                "</div>\n" +
                "</div>";
        }
        document.getElementById("bo").innerHTML = temp;
    }

    // 删除当前按钮的方法
    function del(temp) {
        temp.parent().parent().remove();
        $("#home").hide();
    }

    // 隐藏按钮
    function btnNo() {
        $("#home").hide();
    }

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.min.js"></script>
</head>
<body style="height: 6000px">
<table>
    <thead>
    <tr>
        <th>#</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td><input type="button" value="按钮" id="btn" onclick="btn(this)"/></td>
    </tr>
    </tbody>
</table>
<div id="divcss5">
    <div id="bo">
    </div>
</div>
</body>
</html>

演示
1.启动会先执行a()方法
打开页面会执行a()方法
2.点击按钮弹出再点击就删除按钮了
在这里插入图片描述

迷雾中的夜行白马

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js+html+css+jquery实现简单的弹框

css代码 #divcss5 { margin: 0 auto; width: 300px; position: relative; top: 4%; } #home { width: 300px; height: 15...
复制链接

扫一扫

专栏目录