Bootstrap实现dialog上一步下一步多个弹窗交互

版本介绍：

• Bootstrap v3.3.7
• jQuery v3.5.1

一、功能介绍

1. 重新设置bootstrap主题色
2. 内容区以card形式展示，纯js实现分页功能
3. 共两步骤，第一步选择模板，第二步进行其他操作
4. 步骤一内的按钮点击下一步，进入第二步；第二步点击上一步，返回第一步
5. 步骤一选择模板时，根据模板id获取模板内容，并展示在第二步中
6. 关闭弹窗时重置数据，当从第二步点击上一步回到第二步时，不重置数据

二、效果图

三、代码

1. index.html

                                         在线生成          
     
       
         
           ×           
生成广告
         
         
                      
                               
         
           下一步         
       
     
   
       
     
       
         
           ×           
生成广告
         
         
           选择模板         
         
           上一步           生成*.gif           生成*.jpg         
       
     
   
         

2. index.js

// TODO const info = {   company_name: "测试服务有限公司",   contact_name: "耿先生",   contact_phone: "1513006500 195**1155",   ad_words: "这里是广告语，我们要努力", };  /**  * @function 获取模板列表数据  * @variable listParams 请求列表分页参数  * @variable total 总条数  * @variable maxPage 最大分页数  */  let listParams = {   pageSize: 10,   pageNumber: 1, }; let total = 0; let maxPage = 0; function getList() {   $.ajax({     type: "POST",     url: "http://10.10.25.110:8000/v/vip_temp_list/",     data: listParams,   }).done(function (res) {     if (res.code === 200) {       console.log(res.result);       total = res.result.total;       renderModuleList(res.result.items);       renderPagination();       renderActivePagination();     }   }); }  /**  * @function 渲染模板列表  */ function renderModuleList(data) {   // 渲染前先清空   $(".module-list").empty();   let ctx = "";   data.map((item) => {     ctx +=       '
模板名称：" +       item.temp_title +       "
尺寸：" +       item.width +       "x" +       item.height +       '
';   });    $(".module-list").append($(ctx)); }  /**  * @function 选择模板  */ $(".module-list").on("click", ".module-item", function () {   const kid = $(this).data("kid");   $(this)     .addClass("module-item-active")     .siblings()     .removeClass("module-item-active");   console.log(kid); });  /**  * @function 渲染分页  */ function renderPagination() {   // 渲染前先清空   $(".pagination").empty();   maxPage = Math.ceil(total / 10);   // 1. 上一页   let page = `
                    «                
`;   // 2. 页码   for (let i = 1; i <= maxPage; i++) {     page += '
' + i + "
";   }   // 3. 下一页   page += `
                            »                        
`;    $(".pagination").append($(page)); }  /**  * @function 渲染高亮分页  */ function renderActivePagination() {   $($(".pagination li")[listParams.pageNumber])     .addClass("active")     .siblings()     .removeClass("active"); }  /**  * @function 点击分页  */ $(".pagination").on("click", "li", function () {   const prop = $(this).data("prop");   if (prop === "prev") {     // 上一页     if (listParams.pageNumber > 1) {       listParams.pageNumber--;     }   } else if (prop === "next") {     // 下一页     if (listParams.pageNumber < maxPage) {       listParams.pageNumber++;     }   } else {     // 页码     const page = $(this).text();     listParams.pageNumber = page * 1;   }   getList(); });  /**  * @function 重置数据  */ function reset() {   $(".module-list").empty();   $(".pagination").empty();   listParams = {     pageSize: 10,     pageNumber: 1,   };   total = 0;   maxPage = 0; }  /**  * @function 点击在线生成按钮  */ $(".openModule").on("click", function () {   $("#module").on("show.bs.modal", function () {     if ($("#advertising").css("display") === "block") {       return;     }     getList();   });    $("#module").modal("show"); });  /**  * @function 点击下一步  */ $(".next").click(function () {   $("#module").modal("hide");   // 关闭重置数据   $("#module").on("hidden.bs.modal", function () {     // 如果是第二步回到第一步，不重置数据     if ($("#advertising").css("display") === "block") {       return;     }     reset();   });    $("#advertising").modal("show"); });  /**  * @function 点击上一步  */ $(".last").click(function () {   $("#advertising").modal("hide");   // 关闭生成广告弹窗   $("#advertising").on("hidden.bs.modal", function () {     // 如果是第二步回到第一步，不重置数据     if ($("#module").css("display") === "block") {       return;     }     reset();   });    $("#module").modal("show"); });  

3. index.css

.modal{   overflow-x: hidden;   overflow-y: auto; }  /* 模板列表*/ .module-list{   display: flex;   flex-wrap: wrap; }  .module-item {   box-sizing: border-box;   width: calc(50% - 20px);   display: flex;   flex-direction: column;   padding: 10px;   margin: 10px;   border: 1px solid #e5e5e5;   border-radius: 10px;   cursor: pointer; }  .module-item:hover {   border-color: #c6e2ff;   background-color: #ecf5ff; }  .module-item:active,.module-item:focus {   border-color: #409eff;   background-color: #ecf5ff; }  .module-item-active,.module-item-active:hover{   border-color: #409eff;   background-color: #ecf5ff; }  .module-image{   flex: 1;   display: flex;   justify-content: flex-end;   align-items: end;   margin-top: 5px; }  .module-image img {   max-width: 100px;   max-height: 100px; }  /* 分页容器 */ .pagination-box{   display: flex;   justify-content: center; }  

4. 用于修改bootstrap主题的css文件：theme.css:

/* 默认按钮 */ .btn-default{   border-color: #dcdfe6;   background-color: #ffffff; }  .btn-default:hover{   border-color: #c6e2ff;   background-color: #ecf5ff; }  .btn-default:active{   color: #409eff;   border-color: #409eff;   background-color: #ecf5ff;   outline:none; }  .btn-default:focus{   border-color: #dcdfe6!important;   background-color: #ffffff!important;   outline:none!important; }  /* 主要按钮 */ .btn-primary{   border-color: #409EFF;   background-color: #409EFF; }  .btn-primary:hover{   border-color: #79bbff;   background-color: #79bbff; }  .btn-primary:active{   border-color: #337ecc;   background-color: #337ecc;   outline:none; }  .btn-primary:focus{   border-color: #409EFF!important;   background-color: #409EFF!important;   outline:none!important; }  /* 成功按钮 */ .btn-success{   border-color: #67c23a;   background-color: #67c23a; }  .btn-success:hover{   border-color: #95d475;   background-color: #95d475; }  .btn-success:active{   border-color: #529b2e;   background-color: #529b2e;   outline:none; }  .btn-success:focus{   border-color: #67c23a!important;   background-color: #67c23a!important;   outline:none!important; }