layer多次弹窗(msg alert),新增自定义类型9

安河桥北2025

已于 2023-02-19 22:19:21 修改

阅读量472

点赞数

文章标签： html css javascript layui.js Powered by 金山文档

于 2023-02-19 22:07:48 首次发布

本文链接：https://blog.csdn.net/qq_29060627/article/details/129115572

版权

下载位置

https://www.jb51.net/codes/86877.html

layer 弹层组件 v3.5.1 弹层组件

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="http://127.0.0.1:60443/z/layer-v3.5.1/src/theme/default/layer.css" />
  <title>Dox</title>
</head>

<body>
  <script src="./jq1.js"></script>
  <script src="http://127.0.0.2:60443/z/layer-v3.5.1/src/layer.js?4"></script>
  <script>
 layer.open({ type:9,content: "A1", icon: 1,offset: 'r'} );
 layer.open({ type:9,content: "AAD", icon: 1,offset: 'l'} );
  </script>
</body>
</html>

修改源码( layer-v3.5.1/src/layer.js )如下:

在264行左右,把config.type == 0替换为(config.type == 0||config.type == 9)

//主体
    '<div class="'+ doms[0] + (' layui-layer-'+ready.type[config.type]) + ((((config.type == 0||config.type == 9) || config.type == 2) && !config.shade) ? ' layui-layer-border' : '') + ' ' + (config.skin||'') +'" id="'+ doms[0] + times +'" type="'+ ready.type[config.type] +'" times="'+ times +'" showtime="'+ config.time +'" conType="'+ (conType ? 'object' : 'string') +'" style="z-index: '+ zIndex +'; width:'+ config.area[0] + ';height:' + config.area[1] + ';position:'+ (config.fixed ? 'fixed;' : 'absolute;') +'">'
      + (conType && config.type != 2 ? '' : titleHTML)
      + '<div id="'+ (config.id||'') +'" class="layui-layer-content'+ (( (config.type == 0||config.type == 9)  && config.icon !== -1) ? ' layui-layer-padding' :'') + (config.type == 3 ? ' layui-layer-loading'+config.icon : '') +'">'
        + ((config.type == 0||config.type == 9) && config.icon !== -1 ? '<i class="layui-layer-ico layui-layer-ico'+ config.icon +'"></i>' : '')
        + (config.type == 1 && conType ? '' : (config.content||''))

在31行左右修改源码:

  //五种原始层模式
  type: ['dialog', 'page', 'iframe', 'loading', 'tips','dialog','dialog','dialog','dialog','dialog'],

在290行左右,如下代码后10来行,增加类型9

//创建骨架
Class.pt.creat = function(){

  switch(config.type){
    case 9:
      config.btn = ('btn' in config) ? config.btn : ready.btn[0];
      //layer.closeAll('dialog');//注释掉
    break;
    case 0:
      config.btn = ('btn' in config) ? config.btn : ready.btn[0];
      layer.closeAll('dialog');
    break;

大功告成!效果如图:

当然不新增自定义类型也是可以的,就是丑了点:

layer.open({
    type: 1
    //,title: false //不显示标题栏
    ,closeBtn: false
    ,area: '300px;'
    ,shade: 0.8
    ,offset: 'mt'
    ,content: "AA"
});
layer.open({
    type: 1
    //,title: false //不显示标题栏
    ,closeBtn: false
    ,area: '300px;'
    ,shade: 0.8
    ,offset: 'l'
    ,content: "BB"
});