zoukankan      html  css  js  c++  java
  • 弹出框layer插件

    有时候我们在网页制作中需要引用各种弹出框,弹出框的展现形式多种多样。
    可以是弹出图片,视频,文字,也可以是弹出图片轮播等形式;

    弹出框插件——layer使用方法(其实官方文档中已经介绍的很详细):

    下载layer文件,下载好的文件不用修改,路径也不能乱改。

    layer插件运行环境是jQuery1.8及以上,因为layer是基于jQuery的一个插件,必须引入。
    layer引入文件的代码应该放在页面底部。

    代码:

    <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="js/layer.js"></script>
    <script type="text/javascript">
    $('#video_play').on('click', function(){
    layer.open({
    type: 1,
    area: ['854px', '505px'],
    shade: 0.6, //点击遮罩关闭
    shift:0,
    title:'Rich New',
    content: '<div style="margin-top:-25px;" id="video"><video class="video-js vjs-default-skin" controls="controls" preload="auto" width="854px" height="480px" poster="images/s12_video-english.jpg" data-setup="{}"><source src="video/s12_video-english.mp4" type="video/mp4" /><source src="video/s12_video-english.webm" type="video/webm" /><source src="video/s12_video-english.ogv" type="video/ogg" /></video></div>'
    });
    });
    </script>



    官方:
    //在这里面输入任何合法的js语句

    layer.open({
    type: 1, //page层
    area: ['500px', '300px'],
    title: '你好,layer。',
    shade: 0.6, //遮罩透明度
    moveType: 1, //拖拽风格,0是默认,1是传统拖动
    shift: 1, //0-6的动画形式,-1不开启
    content: '<div style="padding:50px;">这是一个非常普通的页面层(type:1),传入了自定义的html</div>'
    });
  • 相关阅读:
    webpack4 plugins 篇
    webpack4 打包静态资源
    babel 7 简单指北
    JS: 深拷贝
    JS: 数组的循环函数
    async await 的执行
    redux
    TCP通信
    理解Javascript的原型和原型链
    「译」forEach循环中你不知道的3件事
  • 原文地址:https://www.cnblogs.com/victor5230/p/5795649.html
Copyright © 2011-2022 走看看