一个弹窗

  • 我自己都在用的
  • 不多说
    看图片
    image.png
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>弹窗示例</title>
 <link href="https://cdn.bootcdn.net/ajax/libs/layui/2.8.1/css/layui.css" rel="stylesheet">
  <script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/layui/2.8.1/layui.min.js"></script>
</head>
<body>
  <button onclick="openDialog()">打开弹窗</button>
  <script>
  function openDialog() {
    layui.use(['layer'], function() {
      var layer = layui.layer;
    
      var dialog = layer.open({
        type: 2,
        title: '弹窗示例',
        shadeClose: true,
        shade: 0.8,
        scrollbar: false,
        maxmin: true,
        area: ['80%', '90%'],
        content: 'https://api.cenguigui.cn/api/kuwo.html', // 弹窗内容的 URL
        success: function(layero, index) {
          if (navigator.userAgent.match(/(iPhone|iPod|Android|ios|iPad)/i)) {
            layer.full(index); // 如果是移动设备,则全屏显示弹窗
          }
        }
      });
    });
  }
  </script>
</body>
</html>

列表样式

示例图

image.png

image.png

  • 里面的列表可以根据我的请求接口自己写个php代码也行
  • 和我用的同款api程序也是可以的
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>API列表示例</title>
  <link href="https://cdn.bootcdn.net/ajax/libs/layui/2.8.1/css/layui.css" rel="stylesheet">
  <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/layui/2.8.1/layui.min.js"></script>
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-md-3">
        <button class="btn btn-primary" onclick="loadApiList()">加载API列表</button>
      </div>
    </div>
    <div class="row api-list">
      <!-- 这里是动态加载的API列表 -->
    </div>
  </div>

  <script>
    function loadApiList() {
      $.ajax({
        type: "post",
        url: "https://api.cenguigui.cn/apilist.php?type=Info&page=1&limit=99",
        timeout: 5000,
        async: true,
        beforeSend: function() {},
        complete: function() {},
        error: function() {},
        success: function(data) {
          var html = '';
          for (var i = 0; i < data.length; i++) {
            html += '<div class="col-md-4"><div class="card" style="cursor:pointer;margin-bottom: 10px !important;" onclick="openApiPage(\'' + data[i].name + '\', \'' + data[i].action + '\')"><div class="card-body">' + data[i].name + '</div></div></div>';
          }
          $('.api-list').html(html);
        }
      });
    }

    function openApiPage(name, action) {
      layui.use('layer', function() {
        var layer = layui.layer;
        layer.open({
          type: 2,
          title: name,
          shadeClose: true,
          shade: 0.8,
          scrollbar: false,
          maxmin: true,
          area: ['80%', '90%'],
          content: 'https://api.cenguigui.cn/api/' + action + '.html'
        });
      });
    }
  </script>
</body>
</html>
最后修改:2023 年 11 月 27 日
如果觉得我的文章对你有用,请随意赞赏