医药做网站,seo培训优化课程,手机上开发app,北京市网站设计Bootstrap实现dialog上一步下一步多个弹窗交互 版本介绍#xff1a; Bootstrap v3.3.7jQuery v3.5.1 一、功能介绍
重新设置bootstrap主题色内容区以card形式展示#xff0c;纯js实现分页功能共两步骤#xff0c;第一步选择模板#xff0c;第二步进行其他操作步骤一内的按…Bootstrap实现dialog上一步下一步多个弹窗交互 版本介绍 Bootstrap v3.3.7jQuery v3.5.1 一、功能介绍
重新设置bootstrap主题色内容区以card形式展示纯js实现分页功能共两步骤第一步选择模板第二步进行其他操作步骤一内的按钮点击下一步进入第二步第二步点击上一步返回第一步步骤一选择模板时根据模板id获取模板内容并展示在第二步中关闭弹窗时重置数据当从第二步点击上一步回到第二步时不重置数据
二、效果图 三、代码
index.html
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlelink relstylesheet href./css/bootstrap3.3.7.csslink relstylesheet href./css/theme.csslink relstylesheet href./css/index.cssscript src./js/jquery3.5.1.js/scriptscript src./js/bootstrap3.3.7.js/script
/headbody!-- Button trigger modal --button typebutton classbtn btn-primary btn-lg openModule在线生成/button!-- 选择模板 --div classmodal fade in idmodule tabindex-1 roledialog aria-labelledbymoduleLabeldiv classmodal-dialog roledocumentdiv classmodal-contentdiv classmodal-headerbutton typebutton classclose data-dismissmodal aria-labelClosespanaria-hiddentruetimes;/span/buttonh4 classmodal-title idmoduleLabel生成广告/h4/divdiv classmodal-body!-- 模板列表 --div classmodule-list/div!-- 分页 --nav aria-labelPage navigation classpagination-boxul classpagination/ul/nav/divdiv classmodal-footerbutton typebutton classbtn btn-primary next下一步/button/div/div/div/div!-- 生成广告 --div classmodal fade in idadvertising tabindex-1 roledialog aria-labelledbyadvertisingLabeldiv classmodal-dialog roledocumentdiv classmodal-contentdiv classmodal-headerbutton typebutton classclose data-dismissmodal aria-labelClosespanaria-hiddentruetimes;/span/buttonh4 classmodal-title idadvertisingLabel生成广告/h4/divdiv classmodal-body选择模板/divdiv classmodal-footerbutton typebutton classbtn btn-default last上一步/buttonbutton typebutton classbtn btn-success生成*.gif/buttonbutton typebutton classbtn btn-primary生成*.jpg/button/div/div/div/divscript src./js/index.js/script/body/htmlindex.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 div classmodule-item data-kid item.id div模板名称 item.temp_title /divdiv尺寸 item.width x item.height /divdiv classmodule-imageimg src item.img_url classimg-responsive alt item.temp_title /div/div;});$(.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 li data-proppreva href# aria-labelPreviousspan aria-hiddentruelaquo;/span/a/li;// 2. 页码for (let i 1; i maxPage; i) {page lia href# data-prop i i /a/li;}// 3. 下一页page li data-propnexta href# aria-labelNextspan aria-hiddentrueraquo;/span/a/li;$(.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);
});
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;
}
用于修改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;
}
