bootstrap-modal 相关问题

Bootstrap提供了一个JavaScript驱动的对话框元素,可用于替换原生对话框(在某种程度上);与原生对话框不同,Bootstrap模式不能阻止执行流程。

更改 React Bootstrap Modal.Header closeButton 图标

我正在使用 React Bootstrap Modal。我正在尝试更改 closeButton 图标。但这没有用。 购物车 我正在使用 React Bootstrap Modal。我正在尝试更改 closeButton 图标。但没有成功。 <Modal.Header className='modal-head' closeButton> <Modal.Title>Cart</Modal.Title> </Modal.Header> 我不认为react-bootstrap库本身提供任何这样的东西。尽管您可以做的是在模式标题中添加一个右对齐的图标,并添加一个 onClick 操作来更改模式的打开状态并关闭它。 *你可以看看这个例子,也许你会更清楚。 您只需导入 LoginButton 即可。 专注于 handleShow export const LoginButton = () => { const [fullscreen, setFullscreen] = useState(true); const [show, setShow] = useState(false); function handleShow(breakpoint) { setShow(breakpoint); setFullscreen(true); } return ( <div> <Button className="me-2 mb-2" onClick={() => handleShow(true)}> Login </Button> <Modal className="Modal_Login" show={show} fullscreen={fullscreen} onHide={() => setShow(false)} > <Modal.Header className="Modal_Login_header" > <Modal.Title className=" Modal_Login_header_title col-md-4" >Login</Modal.Title> <Button className="col-md-2" onClick={() => handleShow(false)}> CLose </Button> </Modal.Header> <Modal.Body>Modal body content</Modal.Body> </Modal> </div> ) }; CSS: .Modal_Login{ display: flex; flex-direction:row; } .Modal_Login_header{ display: flex; flex-direction:row; justify-content: flex-end; } 简单来说,您无法使用 react-bootstrap 更改图标或颜色。因为图标是由来自 SVG 的标签 CSS 创建的,其中属性 --bs-btn-close-bg 是图标本身。 所以,我认为它在 CSS 文件中创建自定义标签的唯一方法,如下所示: .btn-close { --bs-btn-close-bg: url("data:image/svg+xml, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'> <path d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l- 6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0- 1.414z'/> </svg> ") !important; } 要更改图标,请修改标签 path 和为您提供首选图标的属性 viewbox。 并放置 !important 来接受这个 attribute 无论需要什么,FontAwesome 都可以使用您想要的任何图标的 SVG(我谈论的是免费的): .btn-close { --bs-btn-close-bg: url("data:image/svg+xml, <svg xmlns='http://www.w3.org/2000/svg' viewBox="0 0 448 512" fill='white'> <path d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.2 288 416 288c17.7 0 32-14.3 32-32s-14.3-32-32-32l-306.7 0L214.6 118.6c12.5-12.5 12.5-32.8 0- 45.3s-32.8-12.5-45.3 0l-160 160z"/> </svg> ") !important; } 或者如果你想改变颜色改变属性fill='whatever you want',你可以使用rgba,rgb,#code-color。 fill="rgb(13 110 253)" //or fill="#84b6f4" //or fill="rgba(0, 255, 25, 0.8)" 这个例子是纯 HTML 和 CSS,但逻辑是相同的,因为这里唯一重要的东西来自 App.css 或你的 file.css .btn-close { --bs-btn-close-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='black'><path d='M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.2 288 416 288c17.7 0 32-14.3 32-32s-14.3-32-32-32l-306.7 0L214.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z'/></svg>") !important } <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Demo</title> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"> </head> <body> <!-- Button trigger modal --> <div class="text-center"> <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal"> Launch demo modal </button> </div> <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Modal title</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> </div> </div> </div> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script> </body> </html>

回答 3 投票 0

引导模式错误:“未捕获的类型错误:非法调用”

我正在尝试动态渲染此 Bootstrap 模式的内容,但我不断收到此调用错误。我开始怀疑 Bootstrap 无法渲染具有模板的 modalBody

回答 1 投票 0

无法读取模态弹出窗口 Bootstrap 5.1 中未定义的属性“classList”

我在 bootstrap 5.1 模式弹出窗口中遇到问题并收到错误 Cannot read property 'classList' of undefined 。我尝试了显示模式弹出窗口的两个代码,但仍然存在相同的问题。我想要...

回答 4 投票 0

Bootstrap 5 模态未显示

我已将 Bootstrap 5 作为 Nuget 包包含在内,并尝试在页面上设置模式。 Bootstrap 5 的其他方面都按预期工作。 我已将 Bootstrap 5 作为 Nuget 包包含在内,并尝试在页面上设置模式。 Bootstrap 5 的其他方面正在按预期工作。 <div class="col-12"> <button type="button" class="btn entry-button" data-bs-toggle="modal" data-bs-target="#logInModal">Log In</button> <div class="modal" id="logInModal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> It works </div> <div class="modal-body"> It works </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> </div> </div> </div> </div> <button type="button" class="btn entry-button">Create Account</button> </div> 我正在一个带有 ASP.NET 后端的 Angular 项目中执行此操作。 编辑:该按钮在窗口中显示正常,我可以单击它,并且控制台中没有发生错误。 我还没有使用过“index.html”文件。就是这个: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>ActreelClient</title> <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="favicon.ico"> </head> <body> <app-root></app-root> </body> </html> 所有其他引导功能都工作正常。 安装引导程序和@types/boostrap npm i bootstrap npm i @types/boostrap 更改 angular.json 以包含 bootstrap.css 和 bootstrap.bundle.min.js "scripts": ["node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"], "styles": [ "node_modules/bootstrap/dist/css/bootstrap.css", "src/global_styles.css"], 只需复制 bootstrap 中的示例即可 注意:在这个 stackblitz 中,如果您想要一些灵感,我会使用最流行的引导组件。

回答 1 投票 0

如何在codeigniter 3中显示动态模式弹出窗口

我正在开发一个 Codeigniter 项目,该项目以卡片的形式显示数据库信息,并有一个“阅读更多”选项。我想显示带有所选行内容的模式弹出窗口。为了...

回答 1 投票 0

将整个变量传递给boostrap模态[重复]

我有一个主表页面,它加载查询结果,侧面有一个菜单(或者更确切地说是一组按钮)。我的问题是,当我从表中加载模态时,我只看到“id...

回答 1 投票 0

关闭引导模式时,按钮事件不会被忽略

我用这种方式打开模式对话框: 让 myModal = new bootstrap.Modal('#myModal', { 键盘:假, 背景:“静态” }); #myModal 中有一个按钮,我可以绑定单击...

回答 1 投票 0

Angular-ui 分页不适用于模式

我无法使 Angular-UI 分页在模态上工作,并且没有收到任何错误。从没有模式的工作分页复制代码,但不再工作。 这是我的笨蛋: 我无法使 Angular-ui 分页在模态上工作,并且没有收到任何错误。从没有模式的工作分页中复制了代码,但不再工作了。 这是我的笨蛋: <a href="https://plnkr.co/edit/5JHKpdmLMVBFlmL22SGC?p=preview">Plunker</a> 这是我没有模态的起点: <a href="https://plnkr.co/edit/mQUSVxj3PWtZWL0tYD2z?p=preview">Plunker</a> 感谢您的帮助 我要进行手动寻呼,因为我在网上没有找到太多与此相关的信息。

回答 1 投票 0

引导模式:class =“modal fade”导致问题

我正在尝试让引导模式教程在我的 view.ejs 文件中工作。但 class="modal fade" 似乎引起了问题。如果我删除 class="modal fade",模态将永久显示您...

回答 3 投票 0

如何关闭 Angular Bootstrap 模式

我正在使用 Angular 4、Firebase 和 Angular Bootstrap。我打开模式,这是一个用户表单,其想法是在用户使用其中一种登录方法登录后立即关闭模式(

回答 8 投票 0

如何使用 JavaScript 将动态内容加载到 modal/offcanvas 中?

如何使用 JavaScript 将动态内容加载到 Bootstrap 5 模式中? 我有例如索引.php。我想打开一个带有按钮的模式。 该按钮应传递一个 URL(例如 /example.php) 然后我...

回答 1 投票 0

Bootstrap 5 - 将动态内容加载到模态/offcanvas 中 - 纯香草 JS 和 AJAX - 无 jQuery

如何使用纯 vanilla JS(无 jQuery!)将动态内容加载到 Bootstrap 5 模式中? 我有例如索引.php。 我想打开一个带有按钮的模式。 该按钮应传递一个 URL(例如 /examp...

回答 1 投票 0

bootstrap 5 - 将动态内容加载到modal/offcanvas中 - 纯vaniall js和ajax - 无jquery

如何将动态内容加载到 Bootstrap 5 Modal 中。 使用纯 vanilla js(没有 jquery!)。 我有例如索引.php。 我想用按钮打开模式。 该按钮应传递一个 URL(例如 /exam...

回答 1 投票 0

Bootstrap 模式将页面滚动到顶部

打开模式的按钮位于页面底部附近,但模式在顶部打开并将页面滚动到顶部。 我想要: 停止将页面滚动到顶部, 在当前视图中显示模态...

回答 2 投票 0

swiper js 幻灯片在显示 Bootstrap 5 模态弹出窗口后消失

我正在尝试在同一页面上使用 SwiperJS 和 Bootstrap 5 的弹出模式。当我单击幻灯片内的按钮时,它会打开弹出模式并根据滑块显示内容(幻灯片

回答 1 投票 0

最新版本的引导程序未在 Visual Studio 2022 中呈现模式对话框

我已从 Visual Studio 2019 升级到 Visual Studio 2022。 我从事基于 ASP.NET .NET Framework Webform 的 Web 应用程序的工作。当我升级到 Visual Studio 2022 时,我被警告说当前的

回答 1 投票 0

在 ASP.NET Core MVC 中对模态创建进行客户端验证时如何触发错误消息

尽管验证正在运行,但我在显示基本错误消息时遇到了麻烦(例如防止使用无效值创建项目)。这是代码 这是我的视图(Index.cshtml) @模型

回答 1 投票 0

Bootstrap 5 从另一个模态打开模态而不关闭第一个模态

我正在尝试从模式中打开确认模式而不关闭第一个模式,但似乎 Bootstrap 5 的行为与 4 版本不同。 以下 Bootstrap 4 版本可按预期工作 https://...

回答 3 投票 0

每次模态更改时模态重新渲染的演练

我有一系列弹出的模态,并向用户询问汽车估算网站的问题,每次显示新模态时,整个组件和子组件都会重新渲染。这没什么问题,除非...

回答 1 投票 0

引导模式卡在 Angular 中的第一条消息上

该模式仅适用于第一条消息,如果我发送新消息,则不会出现。 我在用: 角17 引导程序5.3 这是.ts文件 从 '@angular/core' 导入 { Component } ; 导入 {

回答 1 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.