融资融券配资网站开发,什么网站程序好,台州市住房和城乡建设厅网站,wordpress教程 pdf下载1 Bootstrap弹框
功能#xff1a;不离开当前页面#xff0c;显示单独内容#xff0c;供用户操作
步骤#xff1a;
引入bootstrap.css和bootstrap.js准备弹框标签#xff0c;确认结构通过自定义属性#xff0c;控制弹框的显示和隐藏 !DOCTYPE html
html la…1 Bootstrap弹框
功能不离开当前页面显示单独内容供用户操作
步骤
引入bootstrap.css和bootstrap.js准备弹框标签确认结构通过自定义属性控制弹框的显示和隐藏 !DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleBootstrap 弹框/title!-- 引入bootstrap.css --link hrefhttps://cdn.jsdelivr.net/npm/bootstrap5.2.2/dist/css/bootstrap.min.css relstylesheet
/headbody!-- 目标使用Bootstrap弹框1. 引入bootstrap.css 和 bootstrap.js2. 准备弹框标签确认结构3. 通过自定义属性控制弹框的显示和隐藏--button typebutton classbtn btn-primary data-bs-togglemodal data-bs-target.my-box显示弹框/button!-- 弹框标签bootstrap的modal弹框添加modal类名默认隐藏--div classmodal my-box tabindex-1div classmodal-dialog!-- 弹框-内容 --div classmodal-content!-- 弹框-头部 --div classmodal-headerh5 classmodal-titleModal title/h5button typebutton classbtn-close data-bs-dismissmodal aria-labelClose/button/div!-- 弹框-身体 --div classmodal-bodypModal body text goes here./p/div!-- 弹框-底部 --div classmodal-footerbutton typebutton classbtn btn-secondary data-bs-dismissmodalClose/buttonbutton typebutton classbtn btn-primarySave changes/button/div/div/div/div!-- 引入bootstrap.js --script srchttps://cdn.jsdelivr.net/npm/bootstrap5.2.2/dist/js/bootstrap.min.js/script
/body/html
2 Bootstrap弹框使用-js控制显示和隐藏 1.通过属性控制弹框显示或隐藏 单纯显示/隐藏 2.通过JS控制弹框显示或隐藏 额外逻辑代码 !DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleBootstrap 弹框/title!-- 引入bootstrap.css --link hrefhttps://cdn.jsdelivr.net/npm/bootstrap5.2.2/dist/css/bootstrap.min.css relstylesheet
/headbody!-- 目标使用JS控制弹框显示和隐藏1. 创建弹框对象2. 调用弹框对象内置方法.show() 显示.hide() 隐藏--button typebutton classbtn btn-primary edit-btn编辑姓名/buttondiv classmodal name-box tabindex-1div classmodal-dialogdiv classmodal-contentdiv classmodal-headerh5 classmodal-title请输入姓名/h5button typebutton classbtn-close data-bs-dismissmodal aria-labelClose/button/divdiv classmodal-bodyform actionspan姓名/spaninput typetext classusername/form/divdiv classmodal-footerbutton typebutton classbtn btn-secondary data-bs-dismissmodal取消/buttonbutton typebutton classbtn btn-primary save-btn保存/button/div/div/div/div!-- 引入bootstrap.js --script srchttps://cdn.jsdelivr.net/npm/bootstrap5.2.2/dist/js/bootstrap.min.js/scriptscript // 1. 创建弹框对象const modalDom document.querySelector(.name-box)const modal new bootstrap.Modal(modalDom)// 编辑姓名-点击-赋予默认姓名-弹框显示document.querySelector(.edit-btn).addEventListener(click, () {document.querySelector(.username).value 默认姓名// 2. 显示弹框modal.show()})// 保存-点击--获取姓名打印-弹框隐藏document.querySelector(.save-btn).addEventListener(click, () {const username document.querySelector(.username).valueconsole.log(模拟把姓名保存到服务器上, username)// 2. 隐藏弹框modal.hide()})/script
/body/html
