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

罪恶克星  金牌会员 | 2024-8-1 07:23:45 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 653|帖子 653|积分 1959

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

   版本先容：
  

  • Bootstrap v3.3.7
  • jQuery v3.5.1
  一、功能先容


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


三、代码


  • index.html
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>Document</title>
  8.   <link rel="stylesheet" href="./css/bootstrap3.3.7.css">
  9.   <link rel="stylesheet" href="./css/theme.css">
  10.   <link rel="stylesheet" href="./css/index.css">
  11.   <script src="./js/jquery3.5.1.js"></script>
  12.   <script src="./js/bootstrap3.3.7.js"></script>
  13. </head>
  15. <body>
  16.   <!-- Button trigger modal -->
  17.   <button type="button" class="btn btn-primary btn-lg openModule">
  18.     在线生成
  19.   </button>
  21.   <!-- 选择模板 -->
  22.   <div class="modal fade in" id="module" tabindex="-1" role="dialog" aria-labelledby="moduleLabel">
  23.     <div class="modal-dialog" role="document">
  24.       <div class="modal-content">
  25.         <div class="modal-header">
  26.           <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
  27.               aria-hidden="true">&times;</span></button>
  28.           <h4 class="modal-title" id="moduleLabel">生成广告</h4>
  29.         </div>
  30.         <div class="modal-body">
  31.           <!-- 模板列表 -->
  32.           <div class="module-list"></div>
  33.           <!-- 分页 -->
  34.           <nav aria-label="Page navigation" class="pagination-box">
  35.             <ul class="pagination"></ul>
  36.           </nav>
  37.         </div>
  38.         <div class="modal-footer">
  39.           <button type="button" class="btn btn-primary next">下一步</button>
  40.         </div>
  41.       </div>
  42.     </div>
  43.   </div>
  45.   <!-- 生成广告 -->
  46.   <div class="modal fade in" id="advertising" tabindex="-1" role="dialog" aria-labelledby="advertisingLabel">
  47.     <div class="modal-dialog" role="document">
  48.       <div class="modal-content">
  49.         <div class="modal-header">
  50.           <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
  51.               aria-hidden="true">&times;</span></button>
  52.           <h4 class="modal-title" id="advertisingLabel">生成广告</h4>
  53.         </div>
  54.         <div class="modal-body">
  55.           选择模板
  56.         </div>
  57.         <div class="modal-footer">
  58.           <button type="button" class="btn btn-default last">上一步</button>
  59.           <button type="button" class="btn btn-success">生成*.gif</button>
  60.           <button type="button" class="btn btn-primary">生成*.jpg</button>
  61.         </div>
  62.       </div>
  63.     </div>
  64.   </div>
  66.   <script src="./js/index.js"></script>
  68. </body>
  70. </html>
复制代码

  • index.js
  1. // TODO
  2. const info = {
  3.   company_name: "测试服务有限公司",
  4.   contact_name: "耿先生",
  5.   contact_phone: "1513006500 195**1155",
  6.   ad_words: "这里是广告语，我们要努力",
  7. };
  9. /**
  10. * @function 获取模板列表数据
  11. * @variable listParams 请求列表分页参数
  12. * @variable total 总条数
  13. * @variable maxPage 最大分页数
  14. */
  16. let listParams = {
  17.   pageSize: 10,
  18.   pageNumber: 1,
  19. };
  20. let total = 0;
  21. let maxPage = 0;
  22. function getList() {
  23.   $.ajax({
  24.     type: "POST",
  25.     url: "http://10.10.25.110:8000/v/vip_temp_list/",
  26.     data: listParams,
  27.   }).done(function (res) {
  28.     if (res.code === 200) {
  29.       console.log(res.result);
  30.       total = res.result.total;
  31.       renderModuleList(res.result.items);
  32.       renderPagination();
  33.       renderActivePagination();
  34.     }
  35.   });
  36. }
  38. /**
  39. * @function 渲染模板列表
  40. */
  41. function renderModuleList(data) {
  42.   // 渲染前先清空
  43.   $(".module-list").empty();
  44.   let ctx = "";
  45.   data.map((item) => {
  46.     ctx +=
  47.       '<div class="module-item" data-kid=' +
  48.       item.id +
  49.       "><div>模板名称：" +
  50.       item.temp_title +
  51.       "</div><div>尺寸：" +
  52.       item.width +
  53.       "x" +
  54.       item.height +
  55.       '</div><div class="module-image"><img src="' +
  56.       item.img_url +
  57.       '" class="img-responsive" alt="' +
  58.       item.temp_title +
  59.       '"></div></div>';
  60.   });
  62.   $(".module-list").append($(ctx));
  63. }
  65. /**
  66. * @function 选择模板
  67. */
  68. $(".module-list").on("click", ".module-item", function () {
  69.   const kid = $(this).data("kid");
  70.   $(this)
  71.     .addClass("module-item-active")
  72.     .siblings()
  73.     .removeClass("module-item-active");
  74.   console.log(kid);
  75. });
  77. /**
  78. * @function 渲染分页
  79. */
  80. function renderPagination() {
  81.   // 渲染前先清空
  82.   $(".pagination").empty();
  83.   maxPage = Math.ceil(total / 10);
  84.   // 1. 上一页
  85.   let page = `<li data-prop="prev">
  86.         <a href="#" aria-label="Previous">
  87.           <span aria-hidden="true">&laquo;</span>
  88.         </a>
  89.       </li>`;
  90.   // 2. 页码
  91.   for (let i = 1; i <= maxPage; i++) {
  92.     page += '<li><a href="#" data-prop="' + i + '">' + i + "</a></li>";
  93.   }
  94.   // 3. 下一页
  95.   page += `<li data-prop="next">
  96.             <a href="#" aria-label="Next">
  97.               <span aria-hidden="true">&raquo;</span>
  98.             </a>
  99.           </li>`;
  101.   $(".pagination").append($(page));
  102. }
  104. /**
  105. * @function 渲染高亮分页
  106. */
  107. function renderActivePagination() {
  108.   $($(".pagination li")[listParams.pageNumber])
  109.     .addClass("active")
  110.     .siblings()
  111.     .removeClass("active");
  112. }
  114. /**
  115. * @function 点击分页
  116. */
  117. $(".pagination").on("click", "li", function () {
  118.   const prop = $(this).data("prop");
  119.   if (prop === "prev") {
  120.     // 上一页
  121.     if (listParams.pageNumber > 1) {
  122.       listParams.pageNumber--;
  123.     }
  124.   } else if (prop === "next") {
  125.     // 下一页
  126.     if (listParams.pageNumber < maxPage) {
  127.       listParams.pageNumber++;
  128.     }
  129.   } else {
  130.     // 页码
  131.     const page = $(this).text();
  132.     listParams.pageNumber = page * 1;
  133.   }
  134.   getList();
  135. });
  137. /**
  138. * @function 重置数据
  139. */
  140. function reset() {
  141.   $(".module-list").empty();
  142.   $(".pagination").empty();
  143.   listParams = {
  144.     pageSize: 10,
  145.     pageNumber: 1,
  146.   };
  147.   total = 0;
  148.   maxPage = 0;
  149. }
  151. /**
  152. * @function 点击在线生成按钮
  153. */
  154. $(".openModule").on("click", function () {
  155.   $("#module").on("show.bs.modal", function () {
  156.     if ($("#advertising").css("display") === "block") {
  157.       return;
  158.     }
  159.     getList();
  160.   });
  162.   $("#module").modal("show");
  163. });
  165. /**
  166. * @function 点击下一步
  167. */
  168. $(".next").click(function () {
  169.   $("#module").modal("hide");
  170.   // 关闭重置数据
  171.   $("#module").on("hidden.bs.modal", function () {
  172.     // 如果是第二步回到第一步，不重置数据
  173.     if ($("#advertising").css("display") === "block") {
  174.       return;
  175.     }
  176.     reset();
  177.   });
  179.   $("#advertising").modal("show");
  180. });
  182. /**
  183. * @function 点击上一步
  184. */
  185. $(".last").click(function () {
  186.   $("#advertising").modal("hide");
  187.   // 关闭生成广告弹窗
  188.   $("#advertising").on("hidden.bs.modal", function () {
  189.     // 如果是第二步回到第一步，不重置数据
  190.     if ($("#module").css("display") === "block") {
  191.       return;
  192.     }
  193.     reset();
  194.   });
  196.   $("#module").modal("show");
  197. });
复制代码

  • index.css
  1. .modal{
  2.   overflow-x: hidden;
  3.   overflow-y: auto;
  4. }
  6. /* 模板列表*/
  7. .module-list{
  8.   display: flex;
  9.   flex-wrap: wrap;
  10. }
  12. .module-item {
  13.   box-sizing: border-box;
  14.   width: calc(50% - 20px);
  15.   display: flex;
  16.   flex-direction: column;
  17.   padding: 10px;
  18.   margin: 10px;
  19.   border: 1px solid #e5e5e5;
  20.   border-radius: 10px;
  21.   cursor: pointer;
  22. }
  24. .module-item:hover {
  25.   border-color: #c6e2ff;
  26.   background-color: #ecf5ff;
  27. }
  29. .module-item:active,.module-item:focus {
  30.   border-color: #409eff;
  31.   background-color: #ecf5ff;
  32. }
  34. .module-item-active,.module-item-active:hover{
  35.   border-color: #409eff;
  36.   background-color: #ecf5ff;
  37. }
  39. .module-image{
  40.   flex: 1;
  41.   display: flex;
  42.   justify-content: flex-end;
  43.   align-items: end;
  44.   margin-top: 5px;
  45. }
  46. .module-image img {
  47.   max-width: 100px;
  48.   max-height: 100px;
  49. }
  51. /* 分页容器 */
  52. .pagination-box{
  53.   display: flex;
  54.   justify-content: center;
  55. }
复制代码

  • 用于修改bootstrap主题的css文件：theme.css:
  1. /* 默认按钮 */
  2. .btn-default{
  3.   border-color: #dcdfe6;
  4.   background-color: #ffffff;
  5. }
  7. .btn-default:hover{
  8.   border-color: #c6e2ff;
  9.   background-color: #ecf5ff;
  10. }
  12. .btn-default:active{
  13.   color: #409eff;
  14.   border-color: #409eff;
  15.   background-color: #ecf5ff;
  16.   outline:none;
  17. }
  19. .btn-default:focus{
  20.   border-color: #dcdfe6!important;
  21.   background-color: #ffffff!important;
  22.   outline:none!important;
  23. }
  25. /* 主要按钮 */
  26. .btn-primary{
  27.   border-color: #409EFF;
  28.   background-color: #409EFF;
  29. }
  31. .btn-primary:hover{
  32.   border-color: #79bbff;
  33.   background-color: #79bbff;
  34. }
  36. .btn-primary:active{
  37.   border-color: #337ecc;
  38.   background-color: #337ecc;
  39.   outline:none;
  40. }
  42. .btn-primary:focus{
  43.   border-color: #409EFF!important;
  44.   background-color: #409EFF!important;
  45.   outline:none!important;
  46. }
  48. /* 成功按钮 */
  49. .btn-success{
  50.   border-color: #67c23a;
  51.   background-color: #67c23a;
  52. }
  54. .btn-success:hover{
  55.   border-color: #95d475;
  56.   background-color: #95d475;
  57. }
  59. .btn-success:active{
  60.   border-color: #529b2e;
  61.   background-color: #529b2e;
  62.   outline:none;
  63. }
  65. .btn-success:focus{
  66.   border-color: #67c23a!important;
  67.   background-color: #67c23a!important;
  68.   outline:none!important;
  69. }
复制代码
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

罪恶克星

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

挺好的 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表