micromodal+splide实现图片弹出放大轮播效果代码-html代码-BFW代码库

micromodal+splide实现图片弹出放大轮播效果代码

代码语言：html

代码描述：micromodal+splide实现图片弹出放大轮播效果代码，micromodal.js实现弹出层，splide.js实现弹出层内图片轮播轮换。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">



<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/splide.min.css">

    <style>

        .modal {
          font-family: -apple-system,BlinkMacSystemFont,avenir next,avenir,helvetica neue,helvetica,ubuntu,roboto,noto,segoe ui,arial,sans-serif;
        }
        
        .modal__overlay {
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: rgba(0,0,0,0.6);
          display: flex;
          justify-content: center;
          align-items: center;
        }
        
        .modal__container {
          background-color: #fff;
          padding: 30px;
          max-width: 500px;
          max-height: 100vh;
          border-radius: 4px;
          overflow-y: auto;
          box-sizing: border-box;
        }
        
        .modal__header {
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
        
        .modal__title {
          margin-top: 0;
          margin-bottom: 0;
          font-weight: 600;
          font-size: 1.25rem;
          line-height: 1.25;
          color: #00449e;
          box-sizing: border-box;
        }
        
        .modal__close {
          background: transparent;
          border: 0;
        }
        
        .modal__header .modal__close:before { content: "\2715"; }
        
        .modal__content {
          margin-top: 2rem;
          margin-bottom: 2rem;
          line-height: 1.5;
          color: rgba(0,0,0,.8);
        }
        
      .........完整代码请登录后点击上方下载按钮下载查看