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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 阿里巴巴Java开发手册(全册四版)

    阿里巴巴Java开发手册(全册四版)阿里官方Java代码规范标准《阿里巴巴Java开发手册2017/2018/2019/2020》小白必备!!!2017年9月25日,阿里巴巴Java开发手册正式发布,至今为止已更迭了四个版本,分别是2017(终极版)、2018(详尽版)、2019(华山版)、2020(泰山版),值得收藏。

    2022年7月7日
  • 徐 氏 介 绍_徐氏的起源

    徐 氏 介 绍_徐氏的起源一、姓氏源流徐氏的姓氏来源比较纯正,主要出自嬴姓。是先帝玄孙伯益之子若木的后裔。相传陷帝有一个孙女叫女修,因食燕子蛋而怀有大业。大业娶少典氏女子女华为妻,生下了皋陶,皋陶生三子(另一说是六子)长子伯益,又叫…

    2022年9月6日
  • Java中JDBC的使用详解[通俗易懂]

    Java中JDBC的使用详解[通俗易懂]打个广告,帮朋友卖点东西,东西超便宜的哟【衣服鞋子等】,厂家直接出货,绝对低于市场价!!!一般都比市场价便宜3—7折【都是牌子货】,如果您感兴趣,可以扫描屏幕下方的二维码,感谢关注!!!微信一、环境介绍在mysql中创建一个库shen,并创建user表和插入表的数据。 新建一个Java工程jdbc,并导入数据驱动。二、详细步骤1、加载数据库驱动//1.加载…

    2022年8月10日
  • JavaScript设计模式—-策略模式[通俗易懂]

    JavaScript设计模式—-策略模式[通俗易懂]声明:这个系列为阅读《JavaScript设计模式与开发实践》—-曾探@著一书的读书笔记1.策略模式的定义将不变的部分和变化的部分隔开是每个设计模式的主题。定义一系列的算法,把它们一个个封装起来,并且使它们可以相互替换。2.策略模式的目的将算法的使用与算法的实现分离开来。3.传统语言中的策略模式和JavaScript中的策略模式对比3.1.传统语言中的策略模式使用策略模式来实现计算奖金v

    2022年7月12日
  • apache knox安装_系统服务组件

    apache knox安装_系统服务组件参考链接:https://blog.csdn.net/qq_37865420/article/details/105787160

    2022年10月28日
  • loadrunner 11 激活成功教程

    loadrunner 11 激活成功教程安装好loadrunner11后1)退出程序,把下载文件中的lm70.dll和mlr5lprg.dll覆盖掉..\HP\LoadRunner\bin下的这两个文件2)注意,win7的话一定要以管理员身份运行启动程序,启动后,点击configuration-&gt;loadrunnerlicense,此时可能会有两个许可证信息存在,退出程序,点击deletelicense.e…

    2022年7月22日

发表回复

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

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