index.html 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>镜像站@layer 弹出层组件 - jQuery 弹出层插件</title>
  6. <meta name="keywords" content="弹出层,jQuery弹出层插件,layer">
  7. <meta name="description" content=" layer 是一款口碑极佳的 Web 弹层组件,她具备全方位的解决方案,致力于服务各个水平段的开发人员,您的页面会轻松地拥有丰富而友好的操作体验。">
  8. <meta name="renderer" content="webkit">
  9. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  10. <link rel="stylesheet" href="../../res.layui.com/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css?v=351-1" media="all">
  11. <link rel="stylesheet" href="../../res.layui.com/static/css/global.css" tppabs="http://res.layui.com/static/css/global.css?v=351-1" media="all">
  12. <link rel="stylesheet" href="demo.css" tppabs="http://www.layui.com/layer/demo.css?v=351-1" media="all">
  13. <script src="../../other/jquery/1.12.3/jquery.min.js" tppabs="http://cdn.staticfile.org/jquery/1.12.3/jquery.min.js"></script>
  14. <script src="../../res.layui.com/layui/release/layer/dist/layer.js-v=351-1.js" tppabs="http://res.layui.com/layui/release/layer/dist/layer.js?v=351-1"></script>
  15. <script>
  16. ;!function(){self!==parent&&(location.href="http://www.baidu.com/")}();
  17. </script>
  18. </head>
  19. <body>
  20. <div class="header">
  21. <div class="layui-main">
  22. <a class="logo" href="../index.html" tppabs="http://www.layui.com/">
  23. <img src="../../res.layui.com/static/images/layui/logo.png" tppabs="http://res.layui.com/static/images/layui/logo.png" alt="layui">
  24. </a>
  25. <ul class="layui-nav">
  26. <li class="layui-nav-item">
  27. <a href="../index.html" tppabs="http://www.layui.com/" target="_blank">layui</a>
  28. </li>
  29. <li class="layui-nav-item layui-this">
  30. <a href="../alone.html" tppabs="http://www.layui.com/alone.html">layer</a>
  31. </li>
  32. </ul>
  33. </div>
  34. </div>
  35. <div class="alone-banner layui-bg-black">
  36. <div class="layui-main">
  37. <h1>layer 弹出层组件</h1>
  38. <p class="layui-hide-xs">用于实现网页中的各种弹出层交互,如 Alert/Confirm/Message/Tips/Page/Iframe/Loading/Prompt/Tab/photo 应有尽有</p>
  39. </div>
  40. </div>
  41. <div class="layer_nav">
  42. <div class="box">
  43. <a href="../doc/modules/layer.html" tppabs="http://www.layui.com/doc/modules/layer.html" title="api" target="_blank">文档手册</a>
  44. <a href="javascript:;" id="demore">
  45. 功能示例
  46. <!--
  47. <cite class="filter_nums">hot</cite>
  48. <cite class="area_zero"></cite>
  49. -->
  50. </a>
  51. <a href="hello.html" tppabs="http://www.layui.com/layer/hello.html" target="_blank">快速上手</a>
  52. <a href="mobile/index.html" tppabs="http://www.layui.com/layer/mobile/" target="_blank">
  53. layer 移动版
  54. </a>
  55. </div>
  56. </div>
  57. <div class="runtest">
  58. <textarea class="site-demo-text" id="testmain">
  59. //在这里面输入任何合法的js语句
  60. layer.open({
  61. type: 1 //Page层类型
  62. ,area: ['500px', '300px']
  63. ,title: 'Hello layer'
  64. ,shade: 0.6 //遮罩透明度
  65. ,maxmin: true //允许全屏最小化
  66. ,anim: 1 //0-6的动画形式,-1不开启
  67. ,content: '<div style="padding:50px;">这是一个非常普通的页面层,传入了自定义的 html</div>'
  68. });
  69. </textarea>
  70. <a href="javascript:;" class="layui-btn layui-btn-normal" onclick="try{new Function(testmain.value)();}catch(e){alert('语句异常:'+e.message)}" class="btns">立即运行</a>
  71. </div>
  72. <div class="clear box layer-main">
  73. <!--
  74. <a href="http://www.layui.com/layuiadmin/" target="_blank" title="layuiAdmin">
  75. <img src="//cdn.layui.com/upload/2021_4/168_1617768452885_15407.png" alt="layuiAdmin" style="width: 1000px; margin-bottom: 5px;">
  76. </a>
  77. -->
  78. <ul class="layer_notice">
  79. <li><a href="http://fly.layui.com/jie/5366/" target="_blank">1. layer 系列常见问题的处理和相关实用干货集锦</a></li>
  80. <li><a href="https://gitee.com/sentsin/layer/releases/" target="_blank">2. layer 所有版本完整更新日志</a></li>
  81. <li><a href="http://fly.layui.com/jie/2461.html" target="_blank">3. 关注 layui 微信公众号,随时随地获取最新动态</a></li>
  82. </ul>
  83. <div class="layer_download">
  84. <ul>
  85. <li class="layui-btn-container" style="margin-top: 10px;">
  86. <a href="https://github.com/sentsin/layer" class="layui-btn layui-btn-sm layui-btn-primary" target="_blank" rel="nofollow" style="background: none; color: #24292E; ">Github</a>
  87. <a href="https://gitee.com/sentsin/layer" class="layui-btn layui-btn-sm layui-btn-primary" target="_blank" rel="nofollow" style="background: none; color: #C71D23; ">Gitee</a>
  88. <a href="https://www.npmjs.com/package/layer-src" class="layui-btn layui-btn-sm layui-btn-primary" target="_blank" rel="nofollow" style="background: none; color: #CE2A1F; ">NPM</a>
  89. </li>
  90. <li style="margin-top: 2px;">
  91. <iframe style="border: none" src="http://ghbtns.com/github-btn.html?user=sentsin&repo=layer&type=watch&count=true" width="100" height="20"></iframe>
  92. <iframe style="border: none" src="http://ghbtns.com/github-btn.html?user=sentsin&repo=layer&type=fork&count=true" width="100" height="20"></iframe>
  93. </li>
  94. </ul>
  95. <span class="layer_yuan layer_ico ie6PNG"></span>
  96. <a class="layui-btn layui-btn-lg layer_down" href="../../res.layui.com/static/download/layer/layer-v3.5.1.zip?v=1" target="_blank">下载 layer 组件</a>
  97. <span class="layer_downs">当前版本:<script>document.write(layer.v);</script>,下载数:<em id="downs">loading…</em></span>
  98. </div>
  99. <div class="layer-text" style="z-index:100;">
  100. <fieldset class="layui-elem-field layui-field-title" style="margin-right: 220px;">
  101. <legend>弹层之术</legend>
  102. </fieldset>
  103. <span class="layer-tool">
  104. <a href="javascript:;" class="layui-btn" id="L_layerDebug">在线调试</a>
  105. <a href="skin.html" tppabs="http://www.layui.com/layer/skin.html" class="layui-btn layui-btn-normal" target="_blank">扩展皮肤</a>
  106. </span>
  107. <p>
  108. <i>layer</i> 是一款历年来备受青睐的 Web 弹出层组件,具备全方位的解决方案,面向各个水平段的开发人员,您的页面会轻松地拥有丰富友好的操作体验。
  109. </p>
  110. <p>
  111. 在与同类组件的比较中,<i>layer</i> 会更能被开发者所选择。这不仅是凭「脸」取胜,而是它尽可能地在以更少的代码展现更强健的功能,且格外注重性能的提升、易用和实用性,<i>layer</i> 甚至还兼容了包括 IE6 在内的所有主流浏览器。其数量可观的基础属性和方法,使得您可以自定义太多您需要的风格,每一种弹层模式各具特色,广受欢迎。当然,这种「王婆卖瓜」的陈述听起来总是有点难受,因此你需要进一步了解她是否真的如你所愿。 <i>layer</i> 被浏览次数:<em id="sees">loading…</em>
  112. </p>
  113. <p>
  114. <i>layer</i> 采用 MIT 开源许可证,<em>是一个永久无偿的公益性项目</em>。因着数年的坚持维护,已被运用在不计其数 Web 平台,已然成为网页弹出层的首先交互方案,几乎所处可见,其中还不乏众多知名大型网站。layer 已被国内乃至全世界至少数十万的开发者所使用过,并且它仍在与 Layui 开源项目一并稳步发展。<!--<a href="http://fly.layui.com/" target="_blank"><em>Fly</em></a>-->
  115. </p>
  116. </div>
  117. <div class="clearfix layer-text">
  118. <fieldset class="layui-elem-field layui-field-title">
  119. <legend>先睹为快</legend>
  120. </fieldset>
  121. <div class="clearfix layer-area" id="chutiyan">
  122. <a class="layui-btn layui-btn-primary" href="javascript:;">初体验</a>
  123. <a class="layui-btn layui-btn-primary layui-hide" href="javascript:;">第三方扩展皮肤</a>
  124. <a class="layui-btn layui-btn-primary" href="javascript:;">询问层</a>
  125. <a class="layui-btn layui-btn-primary" href="javascript:;">提示层</a>
  126. <a class="layui-btn layui-btn-primary" href="javascript:;">墨绿深蓝风</a>
  127. <a class="layui-btn layui-btn-primary" href="javascript:;" style="_display:none;">捕获页</a>
  128. <a class="layui-btn layui-btn-primary" href="javascript:;">页面层</a>
  129. <a class="layui-btn layui-btn-primary" href="javascript:;">自定页</a>
  130. <a class="layui-btn layui-btn-primary" href="javascript:;">tips层</a>
  131. <a class="layui-btn layui-btn-primary" href="javascript:;">iframe层</a>
  132. <a class="layui-btn layui-btn-primary" href="javascript:;">iframe层</a>
  133. <a class="layui-btn layui-btn-primary" href="javascript:;">加载层</a>
  134. <a class="layui-btn layui-btn-primary" href="javascript:;">loading层</a>
  135. <a class="layui-btn layui-btn-primary" href="javascript:;">小tips</a>
  136. <a class="layui-btn layui-btn-primary" href="javascript:;">prompt层</a>
  137. <a class="layui-btn layui-btn-primary" href="javascript:;">tab层</a>
  138. <a class="layui-btn layui-btn-primary" href="javascript:;">相册层</a>
  139. <a class="layui-btn layui-btn-primary" href="javascript:;">自动关闭</a>
  140. <a class="layui-btn layui-btn-primary" href="../layuiadmin/index.html" tppabs="https://www.layui.com/layuiadmin/" target="_blank">管理模板</a>
  141. </div>
  142. </div>
  143. <pre id="demo1" class="layui-code" lay-height="380px" lay-title="上述示例对应代码">
  144. 特别说明:
  145. 事件需自己绑定,以下只展现调用代码。
  146. <p>//初体验</p>
  147. layer.alert('内容')
  148. <p>//扩展皮肤</p>
  149. layer.alert('内容', {
  150. icon: 1,
  151. skin: 'layer-ext-demo' //见:<a target="_balnk" style="color:#00B2E2;" href="http://layer.layui.com/skin.html#publish">扩展说明</a>
  152. })
  153. <p>//询问框</p>
  154. layer.confirm('您是如何看待前端开发?', {
  155. btn: ['重要','奇葩'] //按钮
  156. }, function(){
  157. layer.msg('的确很重要', {icon: 1});
  158. }, function(){
  159. layer.msg('也可以这样', {
  160. time: 20000, //20s后自动关闭
  161. btn: ['明白了', '知道了']
  162. });
  163. });
  164. <p>//提示层</p>
  165. layer.msg('一段提示信息');
  166. <p>//墨绿深蓝风</p>
  167. layer.alert('墨绿风格,点击确认看深蓝', {
  168. skin: 'layui-layer-molv' //样式类名
  169. ,closeBtn: 0
  170. }, function(){
  171. layer.alert('偶吧深蓝style', {
  172. skin: 'layui-layer-lan'
  173. ,closeBtn: 0
  174. ,anim: 4 //动画类型
  175. });
  176. });
  177. <p>//捕获页</p>
  178. layer.open({
  179. type: 1,
  180. shade: false,
  181. title: false, //不显示标题
  182. content: $('.layer_notice'), //捕获的元素,注意:最好该指定的元素要存放在body最外层,否则可能被其它的相对元素所影响
  183. cancel: function(){
  184. layer.msg('捕获就是从页面已经存在的元素上,包裹layer的结构', {time: 5000, icon:6});
  185. }
  186. });
  187. <p>//页面层</p>
  188. layer.open({
  189. type: 1,
  190. skin: 'layui-layer-rim', //加上边框
  191. area: ['420px', '240px'], //宽高
  192. content: 'html内容'
  193. });
  194. <p>//自定页</p>
  195. layer.open({
  196. type: 1,
  197. skin: 'layui-layer-demo', //样式类名
  198. closeBtn: 0, //不显示关闭按钮
  199. anim: 2,
  200. shadeClose: true, //开启遮罩关闭
  201. content: '内容'
  202. });
  203. <p>//tips层</p>
  204. layer.tips('Hi,我是tips', '吸附元素选择器,如#id');
  205. <p>//iframe 层</p>
  206. layer.open({
  207. type: 2,
  208. title: 'layer mobile页',
  209. shadeClose: true,
  210. shade: 0.8,
  211. area: ['380px', '90%'],
  212. content: 'mobile/' //iframe的url
  213. });
  214. <p>//iframe 层</p>
  215. layer.open({
  216. type: 2,
  217. title: '很多时候,我们想最大化看,比如像这个页面。',
  218. shadeClose: true,
  219. shade: false,
  220. maxmin: true, //开启最大化最小化按钮
  221. area: ['893px', '600px'],
  222. content: 'https://www.baidu.com/'
  223. });
  224. <p>//加载层</p>
  225. var index = layer.load(0, {shade: false}); //0代表加载的风格,支持0-2
  226. <p>//loading层</p>
  227. var index = layer.load(1, {
  228. shade: [0.1,'#fff'] //0.1透明度的白色背景
  229. });
  230. <p>//小tips</p>
  231. layer.tips('我是另外一个tips,只不过我长得跟之前那位稍有些不一样。', '吸附元素选择器', {
  232. tips: [1, '#3595CC'],
  233. time: 4000
  234. });
  235. <p>//prompt层</p>
  236. layer.prompt({title: '输入任何口令,并确认', formType: 1}, function(pass, index){
  237. layer.close(index);
  238. layer.prompt({title: '随便写点啥,并确认', formType: 2}, function(text, index){
  239. layer.close(index);
  240. layer.msg('演示完毕!您的口令:'+ pass +'&lt;br&gt;您最后写下了:'+text);
  241. });
  242. });
  243. <p>//tab层</p>
  244. layer.tab({
  245. area: ['600px', '300px'],
  246. tab: [{
  247. title: 'TAB1',
  248. content: '内容1'
  249. }, {
  250. title: 'TAB2',
  251. content: '内容2'
  252. }, {
  253. title: 'TAB3',
  254. content: '内容3'
  255. }]
  256. });
  257. <p>//相册层</p>
  258. $.getJSON('test/photos.json?v='+new Date, function(json){
  259. layer.photos({
  260. photos: json //格式见API文档手册页
  261. ,anim: 5 //0-6的选择,指定弹出图片动画类型,默认随机
  262. });
  263. });
  264. <p>//显示自动关闭倒计秒数</p>
  265. layer.alert('在标题栏显示自动关闭倒计秒数', {
  266. time: 5*1000
  267. ,success: function(layero, index){
  268. var timeNum = this.time/1000, setText = function(start){
  269. layer.title((start ? timeNum : --timeNum) + ' 秒后关闭', index);
  270. };
  271. setText(!0);
  272. this.timer = setInterval(setText, 1000);
  273. if(timeNum <= 0) clearInterval(this.timer);
  274. }
  275. ,end: function(){
  276. clearInterval(this.timer);
  277. }
  278. });
  279. <p></p><p></p>
  280. </pre>
  281. <div class="layer-text" style="padding:20px 0 10px;" id="yiwang">
  282. <fieldset class="layui-elem-field layui-field-title">
  283. <legend>再试牛刀</legend>
  284. </fieldset>
  285. </div>
  286. <ul class="clearfix demolist">
  287. <li class="layer-area">
  288. <div>信息框</div>
  289. <a class="layui-btn layui-btn-primary layer-demolist" href="javascript:;">例1</a>
  290. <a class="layui-btn layui-btn-primary layer-demolist" href="javascript:;">例2</a>
  291. <a class="layui-btn layui-btn-primary layer-demolist" href="javascript:;">例3</a>
  292. <a class="layui-btn layui-btn-primary layer-demolist" href="javascript:;">例4</a>
  293. <a class="layui-btn layui-btn-primary layer-demolist" href="javascript:;">例5</a>
  294. </li>
  295. <li class="layer-area">
  296. <div>页面层/iframe层</div>
  297. <a class="layui-btn layui-btn-primary layer-demolist" href="javascript:;">页面层-自定义</a>
  298. <a class="layui-btn layui-btn-primary layer-demolist" href="javascript:;">页面层-图片</a>
  299. <a class="layui-btn layui-btn-primary layer-demolist" href="javascript:;" id="parentIframe">iframe-子父操作</a>
  300. <a class="layui-btn layui-btn-primary layer-demolist" href="javascript:;">iframe-多媒体</a>
  301. <a class="layui-btn layui-btn-primary layer-demolist" href="javascript:;">iframe-禁滚动条</a>
  302. </li>
  303. <li>
  304. </li>
  305. <li class="layer-area">
  306. <div>加载层</div>
  307. <a class="layui-btn layui-btn-primary layer-demolist" href="javascript:;">默认</a>
  308. <a class="layui-btn layui-btn-primary layer-demolist" href="javascript:;">风格2</a>
  309. <a class="layui-btn layui-btn-primary layer-demolist" href="javascript:;">风格3</a>
  310. <a class="layui-btn layui-btn-primary layer-demolist" href="javascript:;">风格4</a>
  311. <a class="layui-btn layui-btn-primary layer-demolist" href="javascript:;">打酱油</a>
  312. </li>
  313. <li class="layer-area">
  314. <div>tips层</div>
  315. <a class="layui-btn layui-btn-primary layer-demolist" href="javascript:;">上</a>
  316. <a class="layui-btn layui-btn-primary layer-demolist" href="javascript:;">右</a>
  317. <a class="layui-btn layui-btn-primary layer-demolist" href="javascript:;">下</a>
  318. <a class="layui-btn layui-btn-primary layer-demolist" href="javascript:;">左</a>
  319. <a class="layui-btn layui-btn-primary layer-demolist" href="javascript:;">允许多个</a>
  320. </li>
  321. <li class="layer-area">
  322. <div>其它演示</div>
  323. <a class="layui-btn layui-btn-primary layer-demolist" href="javascript:;">默认prompt</a>
  324. <a class="layui-btn layui-btn-primary layer-demolist" href="javascript:;">屏蔽浏览器滚动条</a>
  325. <a class="layui-btn layui-btn-primary layer-demolist" href="javascript:;">弹出即全屏</a>
  326. <a class="layui-btn layui-btn-primary layer-demolist" href="javascript:;">正上方</a>
  327. <a class="layui-btn layer-demolist" href="test/more.html" tppabs="http://www.layui.com/layer/test/more.html" target="_blank">更多例子</a>
  328. </li>
  329. </ul>
  330. <pre id="demo2" class="layui-code" lay-height="360px" lay-title="对应配置">
  331. <p>//信息框-例1</p>
  332. layer.alert('见到你真的很高兴', {icon: 6});
  333. <p>//信息框-例2</p>
  334. layer.msg('你确定你很帅么?', {
  335. time: 0 //不自动关闭
  336. ,btn: ['必须啊', '丑到爆']
  337. ,yes: function(index){
  338. layer.close(index);
  339. layer.msg('雅蠛蝶 O.o', {
  340. icon: 6
  341. ,btn: ['嗷','嗷','嗷']
  342. });
  343. }
  344. });
  345. <p>//信息框-例3</p>
  346. layer.msg('这是最常用的吧');
  347. <p>//信息框-例4</p>
  348. layer.msg('不开心。。', {icon: 5});
  349. <p>//信息框-例5</p>
  350. layer.msg('玩命卖萌中', function(){
  351. //关闭后的操作
  352. });
  353. <p>//页面层-自定义</p>
  354. layer.open({
  355. type: 1,
  356. title: false,
  357. closeBtn: 0,
  358. shadeClose: true,
  359. skin: 'yourclass',
  360. content: '自定义HTML内容'
  361. });
  362. <p>//页面层-图片</p>
  363. layer.open({
  364. type: 1,
  365. title: false,
  366. closeBtn: 0,
  367. area: ['auto'],
  368. skin: 'layui-layer-nobg', //没有背景色
  369. shadeClose: true,
  370. content: $('#tong')
  371. });
  372. <p>//iframe层-父子操作</p>
  373. layer.open({
  374. type: 2,
  375. area: ['700px', '450px'],
  376. fixed: false, //不固定
  377. maxmin: true,
  378. content: 'test/iframe.html'
  379. });
  380. <p>//iframe层-多媒体</p>
  381. layer.open({
  382. type: 2,
  383. title: false,
  384. area: ['630px', '360px'],
  385. shade: 0.8,
  386. closeBtn: 0,
  387. shadeClose: true,
  388. content: '//player.youku.com/embed/XMzI1NjQyMzkwNA=='
  389. });
  390. layer.msg('点击任意处关闭');
  391. <p>//iframe层-禁滚动条</p>
  392. layer.open({
  393. type: 2,
  394. area: ['360px', '500px'],
  395. skin: 'layui-layer-rim', //加上边框
  396. content: ['mobile/', 'no']
  397. });
  398. <p>//加载层-默认风格</p>
  399. layer.load();
  400. //此处演示关闭
  401. setTimeout(function(){
  402. layer.closeAll('loading');
  403. }, 2000);
  404. <p>//加载层-风格2</p>
  405. layer.load(1);
  406. //此处演示关闭
  407. setTimeout(function(){
  408. layer.closeAll('loading');
  409. }, 2000);
  410. <p>//加载层-风格3</p>
  411. layer.load(2);
  412. //此处演示关闭
  413. setTimeout(function(){
  414. layer.closeAll('loading');
  415. }, 2000);
  416. <p>//加载层-风格4</p>
  417. layer.msg('加载中', {
  418. icon: 16
  419. ,shade: 0.01
  420. });
  421. <p>//打酱油</p>
  422. layer.msg('尼玛,打个酱油', {icon: 4});
  423. <p>//tips层-上</p>
  424. layer.tips('上', '#id或者.class', {
  425. tips: [1, '#0FA6D8'] //还可配置颜色
  426. });
  427. <p>//tips层-右</p>
  428. layer.tips('默认就是向右的', '#id或者.class');
  429. <p>//tips层-下</p>
  430. layer.tips('下', '#id或者.class', {
  431. tips: 3
  432. });
  433. <p>//tips层-左</p>
  434. layer.tips('左边么么哒', '#id或者.class', {
  435. tips: [4, '#78BA32']
  436. });
  437. <p>//tips层-不销毁之前的</p>
  438. layer.tips('不销毁之前的', '#id或者.class', {
  439. tipsMore: true
  440. });
  441. <p>//默认prompt</p>
  442. layer.prompt(function(val, index){
  443. layer.msg('得到了'+val);
  444. layer.close(index);
  445. });
  446. <p>//屏蔽浏览器滚动条</p>
  447. layer.open({
  448. content: '浏览器滚动条已锁',
  449. scrollbar: false
  450. });
  451. <p>//弹出即全屏</p>
  452. var index = layer.open({
  453. type: 2,
  454. content: 'https://fly.layui.com/jump/alyhot/',
  455. area: ['320px', '195px'],
  456. maxmin: true
  457. });
  458. layer.full(index);
  459. <p>//正上方</p>
  460. layer.msg('灵活运用offset', {
  461. offset: 't',
  462. anim: 6
  463. });
  464. //更多例子
  465. layer.msg('Hi');
  466. </pre>
  467. <div style="margin-top: 20px; text-align: center;">
  468. <p style=" font-weight: 300;">倘若 layer 于你有益,欢迎:</p>
  469. <a href="http://fly.layui.com/sponsors?from=layer" target="_blank" class="layui-btn layui-btn-warm" style="margin-top: 10px;">小额赞赏</a>
  470. </div>
  471. <div class="layer-text" id="yiwang" style="padding:20px 0 10px;">
  472. <fieldset class="layui-elem-field layui-field-title">
  473. <legend>美妙之旅</legend>
  474. </fieldset>
  475. <blockquote class="layui-elem-quote">
  476. 事实上 layer 提供的丰富的基础属性,已经足够让你的弹出框/层变得千变万化,请恕我们无法为您逐一演示。如果您仍觉得文档和代码有不当之处,迫切地希望您能反馈,你可以通各种方式进入 layer 的圈子,许多和你一样的小伙伴将会和你一起,经历这段美妙的开发旅程。
  477. </blockquote>
  478. </div>
  479. <!--
  480. <a href="https://layim.layui.com?from=layer" target="_blank" title="layim">
  481. <img src="//cdn.layui.com/upload/2018_8/168_1534454846756_6275.png" alt="layim" style="max-width: 100%; margin-bottom: 5px;">
  482. </a>
  483. -->
  484. </div>
  485. <div class="hide" ><img src="images/tong.jpg" tppabs="http://www.layui.com/layer/images/tong.jpg"></div>
  486. <div class="layui-footer footer footer-index">
  487. <div class="layui-main">
  488. <p>&copy; <a href="../index.html" tppabs="http://www.layui.com/">「本站仅为 layui 文档保留的镜像站点,与官方无关」</a> MIT license</p>
  489. </div>
  490. </div>
  491. <script src="../../res.layui.com/layui/dist/layui.js" tppabs="http://res.layui.com/layui/dist/layui.js?v=351-1"></script>
  492. <script src="demo.js" tppabs="http://www.layui.com/layer/demo.js?v=351-1"></script>
  493. <!--[if IE 6]>
  494. <script type="text/javascript" src="../../res.layui.com/static/lay/lib/png.js" tppabs="http://res.layui.com/static/lay/lib/png.js"></script>
  495. <script type="text/javascript">DD_belatedPNG.fix('.ie6PNG');</script>
  496. <![endif]-->
  497. </body>
  498. </html>