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


相关推荐

  • ajax error parsererror,ajax jsonp parsererror原因及解决方法

    ajax error parsererror,ajax jsonp parsererror原因及解决方法在前端通过ajax请求后台之后返回的时候,出现了下面的异常:textStatus:”parsererror”;ajax请求代码如下:functiongenerate(url){$.ajax({type:”GET”,url:url,dataType:”jsonp”,timeout:5000,success:function(data){},error:function(XMLHtt…

    2022年6月15日
    29
  • Mysql性能优化三:主从配置,读写分离也是性能优化一大要点

    Mysql性能优化三:主从配置,读写分离也是性能优化一大要点

    2021年11月7日
    42
  • 继电器的驱动电路

    继电器的驱动电路文章目录前言一、DC5V,DC12V,DC~V是什么?二、使用步骤1.小测试三极管如何驱动继电器总结前言很多同学不知道继电器如何使用,这里简单的介绍一下,我这里介绍一下5脚的继电器一、DC5V,DC12V,DC~V是什么?这里的5V,12V指的是继电器的工作电压,也就是1脚和3脚两端的电压,具体看电压器的规格,如果你是DC5V,那你1脚和3脚之间的电压必须是5V,2脚是输入,5脚是常闭端,也就是平时2脚跟5脚连接在一起,当13脚电流达到50mA之后,触点就打到了4脚,也就是说2脚跟4脚连在了一起。

    2022年6月24日
    25
  • win10显卡驱动怎么装_win10系统显卡驱动安装失败怎么办

    win10显卡驱动怎么装_win10系统显卡驱动安装失败怎么办大家好,今天分享一篇来自小白系统官网(xiaobaixitong.com)的图文教程。我们日常在对电脑的使用过程中,经常都会遇到这样或那样的问题。比如说win10系统显卡驱动安装失败该怎么办呢?别着急,还有小编在呢?接下来小编就来告诉大家win10电脑系统显卡驱动安装失败怎么解决。详细教你win10系统显卡驱动安装失败怎么办:方法一,删除之前的显卡驱动文件重新安装1,首先,右键点击“此电脑”,菜单…

    2022年5月26日
    36
  • feign默认负载均衡策略_负载均衡策略的是

    feign默认负载均衡策略_负载均衡策略的是OpenFeign与Ribbon,负载均衡策略

    2022年10月13日
    3
  • sublimit text3 2021激活码【在线破解激活】

    sublimit text3 2021激活码【在线破解激活】,https://javaforall.net/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

    2022年3月15日
    67

发表回复

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

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