bootstrap-modal 相关问题

我是 HTML 和 CSS 的初学者，我有一个使用此代码的工作模式系统打开模态我是 HTML 和 CSS 的初学者，我有一个使用此代码的工作模式系统 <button class="modal-button" href="#myModal1">Open Modal</button> <div id="myModal1" class="modal"> <div class="modal-content"> <div class="modal-header"> <span class="close">X</span> <h2>Modal Header</h2> </div> <div class="modal-body"> <p>Some text in the Modal Body</p> <p>Some other text...</p> </div> <div class="modal-footer"> <h3>Modal Footer</h3> </div> </div> </div> 这是我的模态脚本 <script>// Get the modal // Get the button that opens the modal var btn = document.querySelectorAll("button.modal-button"); // All page modals var modals = document.querySelectorAll('.modal'); // Get the <span> element that closes the modal var spans = document.getElementsByClassName("close"); // When the user clicks on the button, open the modal for (var i =0; i<btn.length; i++){ btn[i].onclick = function(e){ e.preventDefault(); modal = document.querySelector(e.target.getAttribute("href")); modal.style.display = "block"; } } // When the user clicks on <span> (x), close the modal for(var i = 0; i <spans.length; i++) { spans[i].onclick = function(){ for (var index in modals) { if (typeof modals[index].style !== 'undefined') modals[index].style.display = "none"; } } } // When the user clicks anywhere outside of the modal, close it window.onclick = function(event) { if (event.target.classList.contains('modal')) { for (var index in modals){ if (typeof modals[index].style !== 'undefined') modals[index].style.display = "none"; } } }</script> 但是我想用这种类型的代码<button id="connectButton"><img class="icon" src="images/mail.png"><h1>connect</h1></button>来替换第一行。我已经尝试过 this 建议的修复，但它对我不起作用。有人能帮忙吗？

javascript html modal-dialog bootstrap-modal

回答 0 投票 0

模态出现在旁边的模态背景

我是 html 的新手，正在尝试实现引导模式对话框，但是模式背景（不确定确切名称）出现在它的左侧，我该如何解决这个问题我已经尝试过这些......

javascript html css django bootstrap-modal

回答 1 投票 0

如何删除 iframe src on outside click of bootstrap modal

我正在做一个项目，它有一个引导模式来播放视频。当用户在模态之外单击时，模型会关闭，但视频会继续在后台播放。如何添加事件到

jquery modal-dialog bootstrap-modal

回答 0 投票 0

从 URL 中获取这个

如何隐藏 #myModal 不显示在 url 上？到目前为止，每次我点击打开模式罗...

jquery modal-dialog bootstrap-modal

回答 1 投票 0

Bootstrap Modal 在 Angular 中打开不一致

我试图在点击创建的谷歌地图标记时打开一个模式。模态非常不一致——有时立即打开，有时需要 5-10 秒，有时不...

angular google-maps-api-3 bootstrap-modal google-maps-markers bootstrap-5

回答 0 投票 0

Html 代码不会将用户重定向到 Shoppy 并且在被点击后不会显示自定义域

我正在开发一个允许用户创建自己的加密货币水龙头的网页。但是，我面临一个问题，即代码没有将用户重定向到 Shoppy 并且没有显示自定义

javascript html jquery redirect bootstrap-modal

回答 0 投票 0

bootstrap modal 在打开新模式以添加新服务器后验证不明确？

我使用 .NET core 7 开发 blazor 应用程序。打开新模式后，我面临问题验证未重置或删除。打开 New Bootstrap Modal 时在第 5 步发出显示所以我的场景如下详细......

blazor bootstrap-modal bootstrap-5 blazor-server-side

回答 0 投票 0

我不明白 closeButton 属性在 React Bootstrap 模态中的作用

我正在尝试使用 React Bootstrap Modal 向我的 webapp 添加一个模态，我正在努力了解的 closeButton 的属性，这就是我设置模态的方式我正在尝试使用 React Bootstrap Modal 向我的 webapp 添加一个模态，我正在努力了解 <Modal.Header> 的 closeButton 的属性，这就是我如何设置我的模态 <Modal show={this.state.show}> <Modal.Header closeButton> <Modal.Title>Aggiungi un conto corrente</Modal.Title> </Modal.Header> <Modal.Body></Modal.Body> <Modal.Footer> <Button variant="secondary"> Annulla </Button> <Button varian="primary"> Salva </Button> </Modal.Footer> </Modal> 在构造函数中显示状态设置为 false this.state = { show: false } 这是一个类的所有部分，我使用这种方法展示模态 showModalAdd(){ this.setState({ show: true }) } 我真的很难理解该怎么做，如果你愿意为我指明正确的方向，我将非常感激。我已经尝试像文档中那样实现一个方法 handleClose 但那是在函数情况下，我正在用一个类实现它 closeButton 是一个布尔值，它指定 ModalHeader Component should contain a close button 与否。单击此按钮时，它将fire an onHide function in the modal component. <Modal.Header closeButton> =====> 将在模型标题中添加一个关闭按钮 <Modal show={this.state.show} onHide={this.handleClose}>=====>点击上面的按钮将触发隐藏功能这是一个演示，它如何使用您的代码工作： import React from "react"; import Button from "react-bootstrap/Button"; import Modal from "react-bootstrap/Modal"; class App extends React.Component { constructor(props) { super(props); this.state = { show: false, }; this.handleShow = this.handleShow.bind(this); this.handleClose = this.handleClose.bind(this); } handleShow() { this.setState({ show: !this.state.show }); } handleClose() { this.setState({ show: !this.state.show }); } render() { return ( <div> <Modal show={this.state.show} onHide={this.handleClose}> <Modal.Header closeButton> <Modal.Title>Aggiungi un conto corrente</Modal.Title> </Modal.Header> <Modal.Body> kjkjqskjqjkkjqkjksqkj</Modal.Body> <Modal.Footer> <Button variant="secondary">Annulla</Button> <Button varian="primary">Salva</Button> </Modal.Footer> </Modal> <button type="text" onClick={this.handleShow}> {" "} open modal </button> </div> ); } } export default App;

reactjs bootstrap-modal

回答 1 投票 0

我正在使用 Bootstrap v5.2.3 并尝试添加 JavaScript 包。大工程</t...</desc> <question vote="0"> <p>我正在使用 Bootstrap v5.2.3 并尝试添加 JavaScript 包。</p> <pre><code><!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Big project</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="container py-4 px-3 mx-auto">  <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" id="exampleModalLabel">Modal title</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> </div> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script> </body> </html> </code></pre> <p>这就是我的 style.scss 代码的样子。</p> <pre><code>// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc) @import "../node_modules/bootstrap/scss/functions"; // 2. Include any default variable overrides here // 3. Include remainder of required Bootstrap stylesheets (including any separate color mode stylesheets) @import "../node_modules/bootstrap/scss/variables"; // 4. Include any default map overrides here // 5. Include remainder of required parts @import "../node_modules/bootstrap/scss/maps"; @import "../node_modules/bootstrap/scss/mixins"; @import "../node_modules/bootstrap/scss/root"; // 6. Optionally include any other parts as needed @import "../node_modules/bootstrap/scss/utilities"; @import "../node_modules/bootstrap/scss/reboot"; @import "../node_modules/bootstrap/scss/type"; @import "../node_modules/bootstrap/scss/images"; @import "../node_modules/bootstrap/scss/containers"; @import "../node_modules/bootstrap/scss/grid"; @import "../node_modules/bootstrap/scss/helpers"; @import "../node_modules/bootstrap/scss/buttons"; @import "../node_modules/bootstrap/scss/navbar"; @import "../node_modules/bootstrap/scss/nav"; // 7. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss` @import "../node_modules/bootstrap/scss/utilities/api"; </code></pre> <p>我看到 bootstrap.bundle.min.js 正在通过网络加载，但模态无法正常工作。据我所知，在 v5+ 中不需要添加 jQuery 或 Popperjs</p> <p>你知道我在这里错过了什么吗？</p> <p>我也试过 typescript import 语句。</p> </question> <answer tick="true" vote="0"> <p><pre><code>bootstrap.bundle.min.js</code></pre> 文件将包含<pre><code>bootstrap</code></pre> 和<pre><code>popper</code></pre> js。但它不会有 <pre><code>bootstrap.min.css</code></pre> 文件，这需要您的引导程序设计才能正常工作。此外，模态弹出窗口需要有一个按钮，onclick 才能打开它。</p> <p>代码中的工作示例还可以查看<a href="https://getbootstrap.com/docs/5.2/components/modal/" rel="nofollow noreferrer">Modal</a>文档。</p> <pre><code><!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Big project</title> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">  <link rel="stylesheet" href="styles.css"> </head> <body> <div class="container py-4 px-3 mx-auto"> <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">  Launch demo modal </button>  <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" id="exampleModalLabel">Modal title</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> </div> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script> </body> </html> </code></pre> </answer> </body></html>

javascript typescript twitter-bootstrap bootstrap-modal bootstrap-5

回答 0 投票 0

问题引导模态显示在编辑数据时未激活？

我正在使用 .NET core 7 开发 blazor 应用程序。单击编辑按钮时，我遇到引导模式显示不活动的问题。我使用引导程序模式编辑数据但是当单击编辑按钮时模式引导程序显示...

jquery css bootstrap-modal bootstrap-5 blazor-server-side

回答 0 投票 0

在提交表单之前通过 Bootstrap Modal 获得确认

我正在开发一个网站。本网站的一部分是一个编辑表单。当用户想要提交他们的更改时，我希望出现一个 Bootstrap 模式并要求确认。在此处输入图像描述

javascript php bootstrap-modal

回答 1 投票 0

Issues bootstrap modal 突然显示黑暗并且无法控制它？

jquery css bootstrap-modal bootstrap-5 blazor-server-side