JS编写网页弹窗

最新推荐文章于 2022-12-08 16:58:05 发布

前端有学问

最新推荐文章于 2022-12-08 16:58:05 发布

阅读量1.9k

点赞数 1

分类专栏：个人笔记 Web前端设计文章标签： js 弹窗下滑提示

本文链接：https://blog.csdn.net/TeAmo_MyGirl/article/details/40342799

版权

本文介绍了如何使用JavaScript来创建网页弹窗和下滑提示。重点在于弹窗的结构设计，包括遮罩层和内容区的并列布局，通过绝对定位和z-index确保覆盖原有内容。同时提到了使用Jquery进行辅助实现，并附带了右上角关闭按钮的图片素材。

摘要由CSDN通过智能技术生成

前几天公司要求写了网页的弹窗和下滑提示

弹窗主要分为：遮罩层和内容区；遮罩层和内容区必须为并列关系，通过绝对定位和设置z-index覆盖原有的内容

素材：

1.右上‘X’的图片见附件

2.Jquery自己导入

文件结构如图：

废话不多说之接上代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="pop.css">
    <script src="js/pop.js"></script>
    <script src="js/jquery-1.11.0.min.js"></script>

</head>
<body class="pop-body">
    <div>
        这是一个官网弹窗测试 <button οnclick="pop()">弹窗</button>
        这是一个官网弹窗测试 <button οnclick="pop2()">弹窗</button>
    </div>
    <div >
        <p> 这是一个官网弹窗测试  这是一个官网弹窗测试  这是一个官网弹窗测试 这是一个官网弹窗测试  这是一个官网弹窗测试  这是一个官网弹窗测试  这是一个官网弹窗测试  这是一个官网弹窗测试  这是一个官网弹窗测试  这是一个官网弹窗测试  这是一个官网弹窗测试  这是一个官网弹窗测试  </p>
        <p> 这是一个官网弹窗测试  这是一个官网弹窗测试  这是一个官网弹窗测试 </p>
        <p> 这是一个官网弹窗测试  这是一个官网弹窗测试  这是一个官网弹窗测试 </p>
        <p> 这是一个官网弹窗测试  这是一个官网弹窗测试  这是一个官网弹窗测试 </p>
        <br> <br> <br>
        <img src="萌犬.jpg"> <img src="萌犬.jpg"> <img src="萌犬.jpg">
        <br> <br>
        <p> 这是一个官网弹窗测试  这是一个官网弹窗测试  这是一个官网弹窗测试 </p>
        <img src="萌犬.jpg">
        <p> 这是一个官网弹窗测试  这是一个官网弹窗测试  这是一个官网弹窗测试 </p>
        <img src="萌犬.jpg">


    </div>
<script>
    function pop2(){
        kpop.popTips('修改成功');
    }

    function pop(){
        kpop.pop({
            title : '购买提示',
            cont : '示容这是一个一个提示内容这是一个容这这是一个提示内容示内容',
            btn:[ {text:'确定', type:'confirm' , onclick:'confirm'} ],
            btnOnclick:{
                cancle : function(){
                    kpop.closePop();
                },
                confirm :function(){
                    kpop.closePop();
                }
            }
        });
//        kpop.pop({
//          title : '这是一个弹窗',
//          popStyle : {height: "250px"},
//          cont : '<div style="font-size: 18px ;line-height: 18px ;color: #44bb55">这是一个弹窗这是一个弹窗<br><br>这是一个弹窗这是一个<button ο