/* 触发弹层 */(layui弹窗)

淩亂°似流年 2022-12-28 12:37 166阅读 0赞

测试48种layui弹窗

<div class="layui-fluid" id="LAY-component-layer-list">
        <div class="layui-row layui-col-space15">
          <div class="layui-col-md12">
            <div class="layui-card demo-component-layer" style="display: block;">
              <div class="layui-card-header">弹层之美</div>
              <div class="layui-card-body">
                
                <blockquote class="layui-elem-quote">
                  layer 是 layui 中最广为人知的组件，它可以轻松应对 Web 应用开发中的各类复杂的弹出交互。有人说使用 layer 是一种情怀，一旦用上了，就离不开了。有多少人是因为 layer 才选择 layui 的呢，有一种信仰，叫：无条件相信
                </blockquote>
                
              </div>
            </div>
            
            <div class="layui-card">
              <div class="layui-card-header">弹层类型</div>
              <div class="layui-card-body">
                
                <div class="layui-btn-container layadmin-layer-demo">
                  <button class="layui-btn layui-btn-primary" data-type="test1">Alert</button>
                  <button class="layui-btn layui-btn-primary" data-type="test2">Confirm</button>
                  <button class="layui-btn layui-btn-primary" data-type="test3">Msg</button>
                  <button class="layui-btn layui-btn-primary" data-type="test4">Tips</button>
                  <button class="layui-btn layui-btn-primary" data-type="test5">Page</button>
                  <button class="layui-btn layui-btn-primary" data-type="test6">Iframe</button>
                  <button class="layui-btn layui-btn-primary" data-type="test7">Prompt</button>
                  <button class="layui-btn layui-btn-primary" data-type="test8">Tab</button>
                  <button class="layui-btn layui-btn-primary" data-type="test9">Photos</button>
                </div>
                
              </div>
            </div>
            <div class="layui-card">
              <div class="layui-card-header">常规使用</div>
              <div class="layui-card-body">
                
                <div class="layui-btn-container layadmin-layer-demo">
                  <button class="layui-btn layui-btn-primary" data-type="test10">信息框</button>
                  <button class="layui-btn layui-btn-primary" data-type="test11">询问层</button>
                  <button class="layui-btn layui-btn-primary" data-type="test12">提示层</button>
                  <button class="layui-btn layui-btn-primary" data-type="test13">墨绿深蓝风</button>
                  <button class="layui-btn layui-btn-primary" data-type="test14">捕获页</button>
                  <button class="layui-btn layui-btn-primary" data-type="test15">页面层</button>
                  <button class="layui-btn layui-btn-primary" data-type="test16">自定风格</button>
                  <button class="layui-btn layui-btn-primary" data-type="test17">tips层1</button>
                  <button class="layui-btn layui-btn-primary" data-type="test18">tips层2</button>
                  <button class="layui-btn layui-btn-primary" data-type="test19">iframe层</button>
                  <button class="layui-btn layui-btn-primary" data-type="test20">iframe窗</button>
                  <button class="layui-btn layui-btn-primary" data-type="test21">加载层1</button>
                  <button class="layui-btn layui-btn-primary" data-type="test22">加载层2</button>
                  <button class="layui-btn layui-btn-primary" data-type="test23">prompt层</button>
                  <button class="layui-btn layui-btn-primary" data-type="test8">tab层</button>
                  <button class="layui-btn layui-btn-primary" data-type="test9">相册层</button>
                </div>
                
              </div>
            </div>
          </div>
          <div class="layui-col-md12">
            <div class="layui-card">
              <div class="layui-card-header">信息框</div>
              <div class="layui-card-body">
                
                <div class="layui-btn-container layadmin-layer-demo">
                  <button class="layui-btn layui-btn-primary" data-type="test26">例1</button>
                  <button class="layui-btn layui-btn-primary" data-type="test27">例2</button>
                  <button class="layui-btn layui-btn-primary" data-type="test28">例3</button>
                  <button class="layui-btn layui-btn-primary" data-type="test29">例4</button>
                  <button class="layui-btn layui-btn-primary" data-type="test30">例5</button>
                  <button class="layui-btn layui-btn-primary" data-type="test31">例6</button>
    
                </div>
                
              </div>
            </div>
          </div>
          <div class="layui-col-md12">
            <div class="layui-card">
              <div class="layui-card-header">页面层与iframe层</div>
              <div class="layui-card-body">
                
                <div class="layui-btn-container layadmin-layer-demo">
                  <button class="layui-btn layui-btn-primary" data-type="test33">自定义页面</button>
                  <button class="layui-btn layui-btn-primary" data-type="test35" id="LAY_layer_iframe_demo">iframe父子通讯</button>
                  <button class="layui-btn layui-btn-primary" data-type="test36">禁止iframe滚动条</button>
                </div>
                
              </div>
            </div>
          </div>
          <div class="layui-col-md12">
            <div class="layui-card">
              <div class="layui-card-header">加载层</div>
              <div class="layui-card-body">
                
                <div class="layui-btn-container layadmin-layer-demo">
                  <button class="layui-btn layui-btn-primary" data-type="test37">风格1</button>
                  <button class="layui-btn layui-btn-primary" data-type="test38">风格2</button>
                  <button class="layui-btn layui-btn-primary" data-type="test39">风格3</button>
                  <button class="layui-btn layui-btn-primary" data-type="test40">风格4</button>
                </div>
                
              </div>
            </div>
          </div>
          <div class="layui-col-md12">
            <div class="layui-card">
              <div class="layui-card-header">tips层</div>
              <div class="layui-card-body">
                
                <div class="layui-btn-container layadmin-layer-demo">
                  <button class="layui-btn layui-btn-primary" data-type="test41">显示在上</button>
                  <button class="layui-btn layui-btn-primary" data-type="test42">显示在右</button>
                  <button class="layui-btn layui-btn-primary" data-type="test43">显示在下</button>
                  <button class="layui-btn layui-btn-primary" data-type="test44">显示在左</button>
                  <button class="layui-btn layui-btn-primary" data-type="test45">不销毁上一个tips</button>
                </div>
                
              </div>
            </div>
          </div>
          <div class="layui-col-md12">
            <div class="layui-card">
              <div class="layui-card-header">其它示例</div>
              <div class="layui-card-body">
                
                <div class="layui-btn-container layadmin-layer-demo">
                  <button class="layui-btn layui-btn-primary" data-type="test47">最大化弹出</button>
                  <button class="layui-btn layui-btn-primary" data-type="test48">显示在正上方</button>
                </div>
                
              </div>
            </div>
          </div>
        </div>
      </div>

调用：

$('#LAY-component-layer-list .layadmin-layer-demo .layui-btn').on('click', function () { 
                    var type = $(this).data('type');
                    active[type] && active[type].call(this);
                });