zoukankan      html  css  js  c++  java
  • layui 各种弹出框

    第一步:引用文件

    第二步:写脚本

    <script>

    //iframe窗
    //layer.open({
    // type: 2,
    // title: false,
    // closeBtn: 0, //不显示关闭按钮
    // shade: [0],
    // area: ['340px', '215px'],
    // offset: 'rb', //右下角弹出
    // time: 2000, //2秒后自动关闭
    // anim: 2,
    // content: ['text1.html', 'no'], //iframe的url,no代表不显示滚动条 右下角页面
    // end: function () { //此处用于演示
    // layer.open({
    // type: 2,
    // title: '很多时候,我们想最大化看,比如像这个页面。',
    // shadeClose: true,
    // shade: false,
    // maxmin: true, //开启最大化最小化按钮
    // area: ['893px', '600px'],
    // content: 'text.html' //最大化页面
    // });
    // }
    //});


    //初体验
    //layer.alert('内容')
    //第三方扩展皮肤

    //layer.alert('内容', {
    // icon: 1,
    // skin: 'layer-ext-moon' //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则,去这里查阅
    //})


    //询问框
    //layer.confirm('您是如何看待前端开发?', {
    // btn: ['重要', '奇葩'] //按钮
    //}, function () {
    // layer.msg('的确很重要', { icon: 1 });
    //}, function () {
    // layer.msg('的确是奇葩', { icon: 1 });
    //});


    //提示层
    //layer.msg('玩命卖萌中', function () {
    // //关闭后的操作
    //});

    layer.msg('更新成功',{time:1000}, function () {
    parent.location.reload();    //刷新父页面   第二个参数设置msg显示的时间长短
    });


    //墨绿深蓝风

    //layer.alert('墨绿风格,点击确认看深蓝', {
    // skin: 'layui-layer-molv' //样式类名
    // , closeBtn: 1
    //}, function () {
    // layer.alert('偶吧深蓝style', {
    // skin: 'layui-layer-lan'
    // , closeBtn: 1
    // , anim: 4 //动画类型
    // });
    //});


    //页面层
    //layer.open({
    // type: 1,
    // skin: 'layui-layer-rim', //加上边框
    // area: ['auto', 'auto'], //宽高
    // content: '<div id="dd" style="border:1px solid red;100px; height:100px;background-color:pink;">今天要下雪了</div>'
    //});


    //自定页
    //layer.open({
    // type: 1,
    // skin: 'layui-layer-demo', //样式类名
    // closeBtn: 1, //0不显示关闭按钮
    // anim: 2,
    // shadeClose: true, //开启遮罩关闭
    // content: '<div id="dd" style="border:1px solid red;100px; height:100px;background-color:pink;">今天要下雪了</div>'      也可以跳转到某个页面 content: "@Url.Action("Detial", "UserInfo")?id="+id
    //});


    //tips层
    //layer.tips('Hi我是tips', '#btn'); //第二个参数是吸附元素选择器,如#id

    //iframe层
    //layer.open({
    // type: 2,
    // title: 'layer mobile页',
    // shadeClose: true,
    // shade: 0.8,
    // area: ['70%', '90%'],//宽 高
    // content: 'text.html'
    //});


    ////加载层-默认风格
    //layer.load();
    ////此处演示关闭
    //setTimeout(function () {
    // layer.closeAll('loading');
    // layer.msg("关闭了");
    //}, 2000);

    //小tips
    //layer.tips('我是另外一个tips,只不过我长得跟之前那位稍有些不一样。', '吸附元素选择器', {
    // tips: [1, '#3595CC'],
    // time: 4000
    //});


    //prompt层
    //layer.prompt({ title: '输入任何口令,并确认', formType: 1 }, function (pass, index) {
    // layer.close(index);
    // layer.prompt({ title: '随便写点啥,并确认', formType: 2 }, function (text, index) {
    // layer.close(index);
    // layer.msg('演示完毕!您的口令:' + pass + '<br>您最后写下了:' + text);
    // });
    //});


    //tab层
    //layer.tab({
    // area: ['600px', '300px'],
    // tab: [{
    // title: 'TAB1',
    // content: '内容1'
    // }, {
    // title: 'TAB2',
    // content: '内容2'
    // }, {
    // title: 'TAB3',
    // content: '内容3'
    // }]
    //});


    //相册层
    //$.getJSON('test/photos.json?v=' + new Date, function (json) {
    // layer.photos({
    // photos: json //格式见API文档手册页
    // , anim: 5 //0-6的选择,指定弹出图片动画类型,默认随机
    // });
    //});

    </script>

  • 相关阅读:
    Java 面向对象_继承
    Java 面向对象
    使用 pykafka 进行消费
    oracle 的分页、截断查询
    Day03
    Day02 计算机的组成与编程语言
    Day01 MarkDown的使用
    Java方法的重点
    Scanner的小细节
    Java包机制和Javadoc的使用
  • 原文地址:https://www.cnblogs.com/bin521/p/8340062.html
Copyright © 2011-2022 走看看