layer弹出层

layer弹出层运用layer实现页面上弹出层的功能点击按钮,执行弹出层功能正确引入jquery和layer的js文件

大家好,又见面了,我是你们的朋友全栈君。

  运用layer实现页面上弹出层的功能

  点击按钮,执行弹出层功能

<span role="heading" aria-level="2">layer弹出层

 

   正确引入jquery和layer的js文件

  

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>layer</title>
</head>

<body>
    <button id="btn">点我</button>
    <!-- 引入jquery -->
    <script src="jquery-3.4.1.js"></script>
    <!-- 引入layer -->
    <script src="layer/layer.js"></script>
    <script>
        $('#btn').on('click', function () {
            layer.open({
                type: 1,
                anim:6,//弹出层动画
                offset:'t',//弹出层位置:t=top
                area: ['300px', '360px'],//弹出层的大小
                shadeClose: true, //点击遮罩关闭
                content: '<div style="padding:20px;"><a href="http://www.baidu.com">百度一下</a></div>'
            });
        });
    </script>
</body>

</html>

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/154392.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 设计模式之组合(compose)模式

    树形结构在软件中随处可见,比如操作系统中的目录结构,公司组织结构等等,如何运用面向对象的方式来处理这种树形结构是组合模式需要解决的问题。组合模式通过一种巧妙的设计方案来使得用户可以一致性地处理整个树形

    2021年12月28日
    36
  • linux应急响应检查项_centos7查看服务状态

    linux应急响应检查项_centos7查看服务状态上一篇文章说到Windows的应急响应排查,本篇文章就来说说Linux的应急响应排查。首先,前期交互这部分的内容还是不能少的,毕竟掌握的信息越多,排查的思路就越清晰。Part1熟悉主机环境 uname-a cat/proc/version lsb_release-a 首先,先对排查主机的基本信息有一个了解。Part2运行进程排查首先熟悉一下ps命令的参数:ps[选项] -e显示所有进程。…

    2022年9月15日
    3
  • 基于Rust-vmm实现Kubernetes运行时[通俗易懂]

    基于Rust-vmm实现Kubernetes运行时[通俗易懂]随着容器及K8s的广泛使用,越来越多的容器安全与隔离问题被暴露出来,如:容器逃逸、水平攻击、DDos攻击等严重威胁了办公和生产环境的安全与稳定,影响了业务的正常运行。安全容器技术孕育而生,产生了kata、gVisor、unikernel等多种安全容器方案。本文旨在介绍各种安全容器方案,分析各方案特点,结合腾讯在容器安全领域的实践,帮助读者选择适合自身特性的容器运行时。同时引入Rust-VMM项目,介绍Rust-VMM技术和生态,演示如何使用K8s调度和启用Rust-VMM安全容器运行时,展望以Rust语

    2022年9月14日
    2
  • 软件测试基础理论(总结)[通俗易懂]

    软件测试基础理论(总结)[通俗易懂]1. 软件的三个要素:程序(实行特定功能的代码) 文档(支持代码运行)数据(支持程序运行一切有关)2. 软件的产品质量指的是?1)质量是指实体特性的综合,表示实体满足明确的或隐含要求的能力。3. 软件测试的目的:1)验证软件是否满足软件开发合同或者项目开发计划,系统/子系统设计文档,软件需求规格说明,软件产品说明等规定的软件质量要求2)通过测试,发现软件缺陷 3

    2022年6月18日
    27
  • android 获取收到短信验证码,Android自动获取短信验证码

    android 获取收到短信验证码,Android自动获取短信验证码如此当有短信收到时就可以将短信内容写到SD卡中的文件里在另一个java类中写个读取文件内容的方法,并在写测试用例过程中,将得到的String按验证码的具体位置截取即可。publicStringread(Stringstr)throwsIOException{Filefile=newFile(str);FileInputStreamfis=newFileInputStream(fi…

    2022年7月25日
    12
  • 探索衰老机制的中心环节_紫乌鸦刷新机制改了

    探索衰老机制的中心环节_紫乌鸦刷新机制改了前期准备:PC:win7X64vs2013 emwin相关:emwin5.42模拟器,emwin5.42英文手册 同一父窗口下两个控件的刷新不对父窗口进行刷新的前提下,指刷新widget1和widget2. 1.widget为 Framewin或WIndow如果两个widget为Framewin或WIndow类型,则graphic

    2022年10月14日
    3

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号