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>

 

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

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

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 打开vi编辑器出现E325: ATTENTION错误的原因和解决办法

    打开vi编辑器出现E325: ATTENTION错误的原因和解决办法出现如图的所示的情况的原因是上次操作“data.txt”文件异常中断(文件没有退出就直接强制关机或者重启),产生了如下图所示的.data.txt.swp。此文件是隐藏文件查看是使用ls-a命令查看。解决办法是:使用rm命令删除该文件即可。…

  • Jenkins安装_jenkins sonar

    Jenkins安装_jenkins sonar前言jenkins的环境搭建方法有很多,本篇使用docker快速搭建一个jenkins环境。环境准备:mac/Linuxdockerdocker拉去jenkins镜像先下载jenkins镜

  • vc 识别移动硬盘 U盘,本地硬盘[通俗易懂]

    vc 识别移动硬盘 U盘,本地硬盘[通俗易懂]vc 识别移动硬盘 U盘,本地硬盘

  • 生成h5文件_h5实现文件下载

    生成h5文件_h5实现文件下载生成训练h5文件importh5pyimportosimportcv2importmathimportnumpyasnpimportrandomimportroot_path=”/home/tyd/caffe_case/HDF5/image”withopen(“/home/tyd/caffe_case/HDF5/hdf5.txt”,”r”)…

  • String.padStart实际如何工作?

    String.padStart实际如何工作?Previously,IsharedmyusageofpadStarttoelegantlyreplacewhatwould’vebeenloadsofifstatements.Thismagicalmethodthrewmeoffmyrocker.Isimplycouldn’tbelieveitexisted.以前,我分享了pad…

  • java发送邮件代码[通俗易懂]

    java发送邮件代码[通俗易懂]java发送邮件首先需要通过对应的邮件服务转发到中间基站,再有接收方服务器接收邮件,转发给收件人,因此我们再发送邮件时需要先设定邮件发出服务(例如qq、网易等),在配置邮件发送协议以及发送人和接收人,最后设置邮件内容,此处我以正文中带有图片的代码为例!编写代码前,我们需要准备javax下的mail包和activation包。这个在文章的末位会提供下载地址,好了天冷屁股凉,我们直接上高速。。importjavax.mail.Authenticator;importjavax.mail.Mess

发表回复

您的电子邮箱地址不会被公开。

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