Demo

<h2 lay-toc="{id: 'examples', level: 2, hot: true}" class="layui-hide">在线测试</h2> <pre class="layui-code" lay-options="{preview: true, text: {preview: '在线测试'}, copy: false, layout: ['preview']}"> <textarea> {{- d.include("/layer/detail/run.md") }} </textarea> </pre> <div class="ws-docs-showcase" style="margin-top: 16px;"></div> <h3 id="type" lay-toc="{level: 2, hot: true}">弹层类型</h3> <pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', text: {preview: '弹层类型'}, layout: ['preview', 'code'], tools: ['full']}"> <textarea> {{- d.include("/layer/examples/type.md") }} </textarea> </pre> <h3 id="demo-alert" lay-toc="{level: 3}">信息框</h3>

信息框即 dialog 类型层，对应默认的 type: 0，该类型的弹层同时只能存在一个。更多说明详见：#type

<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}"> <textarea> {{- d.include("/layer/examples/alert.md") }} </textarea> </pre> <h3 id="demo-page" lay-toc="{level: 3}">页面层</h3> <pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}"> <textarea> {{- d.include("/layer/examples/page.md") }} </textarea> </pre> <h3 id="demo-iframe" lay-toc="{level: 3}">iframe 层</h3> <pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}"> <textarea> {{- d.include("/layer/examples/iframe.md") }} </textarea> </pre> <h3 id="demo-load" lay-toc="{level: 3}">加载层</h3>

为了不影响继续体验，以下每个 loading 示例均会在 3 秒后自动模拟关闭

<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}"> <textarea> {{- d.include("/layer/examples/load.md") }} </textarea> </pre> <h3 id="demo-tips" lay-toc="{level: 3}">Tips 层</h3> <pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}"> <textarea> {{- d.include("/layer/examples/tips.md") }} </textarea> </pre> <h3 id="demo-other" lay-toc="{level: 3}">其他层</h3> <pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}"> <textarea> {{- d.include("/layer/examples/other.md") }} </textarea> </pre> <h3 id="demo-more" lay-toc="{level: 2, hot: true}">更多演示</h3> <pre class="layui-code" lay-options="{preview: true, text: {preview: '弹出位置'}, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}"> <textarea> {{- d.include("/layer/examples/offset.md") }} </textarea> </pre> <pre class="layui-code" lay-options="{preview: true, text: {preview: '弹出方向 ^2.8+'}, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}"> <textarea> {{- d.include("/layer/examples/direction.md") }} </textarea> </pre> <pre class="layui-code" lay-options="{preview: true, text: {preview: '其他演示'}, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}"> <textarea> {{- d.include("/layer/examples/more.md") }} </textarea> </pre> <pre class="layui-code" lay-options="{preview: true, text: {preview: '异步按钮'}, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}"> <textarea> {{- d.include("/layer/examples/btnasync.md") }} </textarea> </pre> <h3 id="demo-skin" lay-toc="{level: 2, hot: true}">主题风格</h3> <pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}"> <textarea> {{- d.include("/layer/examples/skin.md") }} </script> </textarea> </pre>

小贴士

事实上 layer 丰富的基础属性，可足够让您的弹出层变得千变万化，为了避免占用太多篇幅，就不做过多演示了。