bootstrap-modal 相关问题

单击 tr td 内的按钮时防止其他模式打开，其中单击 tr 将打开另一个模式

所以我有一个带有表格的网页。我已链接每个 tr 以打开显示详细信息的模式。 在最后一列中，我有一些按钮来执行特定任务，例如编辑。 我已经提到过这个

如何在 Angular 函数内使用 JavaScript 触发 bootstrap5 data-bs-dismiss

我正在尝试使用JavaScript以角度方式关闭/隐藏bootstrap5模式，问题是bootstrap中的隐藏功能无法正常工作，所以我想做的是单击一个具有da...

Bootstrap 5 页脚模态按钮在表单外不起作用

下面是表格（从页面源复制，在Symfony框架中） ... 下面是表单（从页面源复制，它是在 Symfony 框架中） <form name="team" method="post" id="team_form" enctype="multipart/form-data"> <div class="form-group"> <label>Image file</label> <div class="vich-image"><input type="file" id="team_imageFile_file" name="team[imageFile][file]" class="form-control" /></div> <div class="row mt-2"> <div id="canvas_wrapper"> <h4>Image Preview</h4> <div class="col"> <canvas id="canvas"> </canvas> </div> <button type="button" id="btnCrop" class="btn btn-success btn-task btn-block mt-2" data-bs-toggle="modal" data-bs-target="#cropModal"> <i class="fas fa-crop" ></i> Crop</button> </div> </div> </div> </form> <!-- Modal --> <div class="modal fade" id="cropModal" tabindex="-1" aria-labelledby="cropModal" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <div class="modal-footer"> <a class="btn btn-warning" id="btnDownload" form="team_form">Save Image</a> </div> </div> </div> <!-- Modal End --> JS document.getElementById("btnDownload").addEventListener("click", function () { alert(1); )}; 虽然我尝试了在其他 stackoverflow 中找到的解决方案。我无法解决它。 在你的 JavaScript 中，你在结尾处放错了 ) 尝试下面的代码 document.getElementById("btnDownload").addEventListener("click", function () { alert(1); });

如何在更新用户电子邮件地址的模式中包含的表单上触发事件

我正在使用一个旧的代码库，其中包含 Backbone JS、jQuery 和 Bootstrap 的技术堆栈。我有一个引导模式，用于更新服务器上的电子邮件地址。我想不通...

Bootstrap 5 模式不会关闭

我的所有模态表单都工作正常。但这是我从 Bootstrap 4 移植到 Bootstrap 5 的一个，它不会关闭。关闭按钮（弹出窗口顶部的 X）不会关闭模式。以及取消

Bootstrap 模态未显示在 Django 模板中

我花了太多时间来解决这个问题。 有谁知道为什么这个模式不会弹出？ 看来，如果我删除表格（占据了大部分代码），模态就会工作......

为什么 Cropper.js 在 Bootstraps 嵌套模型中使用时第二次尝试返回 null？

我想做以下事情： 首先弹出一个带有提交表格的模态按钮。 在此表格中，有一个文档上传输入，有 2 个选项，第一个是正常输入文件上传，第二个是屏幕截图

反应模式关闭

我是 React 的新手。我在index.html 文件中使用了bootstrap CDN。我只想在提交后关闭引导模式文件。怎么做。任何帮助或线索都可以。预先感谢。

我无法在地图函数中使用引导模式

第一个 iframe 可以工作。但第二个 iframe 位于引导模式中，没有获得我的 src 属性。在控制台中显示为空。 如果我输入 src="youtube.com/url" 而不是 src={musics.musicEmbed}...

夏季笔记问题：“插入链接”对话框还隐藏了夏季笔记对话框

我在我的项目中使用夏季笔记作为文本编辑器。我的编辑显示在引导对话框中。一切正常。但是当我尝试插入链接时，summernote 又打开了一个对话框...

为什么bootstrap5模态隐藏不起作用

今天我想在 typescript 函数中隐藏 bootstrap5 "bootstrap": "v5.3.1" madal ，我只是获取模态元素并调用隐藏函数，但似乎不起作用。该...

为什么 Bootstrap 4.6.2 模式不起作用？

我正在尝试从该网站运行模式。我已经安装了 Bootstrap 4.6.2，并且页面上没有出现任何错误。但是，当我尝试运行以下模式代码时，没有任何反应： ...

jQuery 日期选择器月份选择框在 Bootstrap 模式中立即打开和关闭

我遇到了 Bootstrap 模式和 jQuery UI 日期选择器之间的冲突，我无法使用月份选择框，因为某些东西在打开后立即将其关闭。 重现步骤： ...

引导错误：this._config 未定义

我有以下按钮： 我有以下按钮： <button class="kv_styleclass_0 btn btn-outline-success btn-lg" data-bs-toggle="modal" data-bs-target="formModal" type="button"> Стать участником </button> 触发以下模式对话框： <div class="modal fade" aria-labelledby="formModal_label" aria-hidden="true" id="formModal" tabindex="-1"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="formModal_label"> Анкета участника </h5> <button class="btn btn-secondary btn-primary" data-bs-dismiss="modal" type="button"> Закрыть </button> </div> <div class="modal-body"> <iframe src="..." name="..." style="height: 407px;" width="650" frameborder="0"> </iframe> </div> </div> </div> </div> 当我单击按钮时，出现以下错误： Uncaught TypeError: this._config is undefined _initializeBackDrop bootstrap.esm.js:2916 ... 使用NPM获取Bootstrap。使用 Bootstrap v5.2.3. 我尝试通过在代码中的不同位置包含 <script> 标签来获取 Bootstrap JS。与 Popper.JS 一起。 我刚刚遇到了同样的问题，我通过在 data-bs-target 中添加 # 来解决它。修改后的代码如下所示： <button class="kv_styleclass_0 btn btn-outline-success btn-lg" data-bs-toggle="modal" data-bs-target="#formModal" type="button"> Стать участником </button> 看起来您正在传递一个字符串，而 data-bs-target 属性需要一个 id。 编辑：我刚刚看到 CodeCaster 在评论中击败了我。哎呀！ Kamu Lupa Menambahkan # tanda pagar pada bagian data-bs-target <button class="kv_styleclass_0 btn btn-outline-success btn-lg" data-bs-target="formModal" type="button"> Стать участником </button> 在按钮标签中，您必须删除此属性：data-bs-toggle="modal"。然后运行你的应用程序；它会解决问题。

如果某些开关状态为真，则在按钮单击时显示引导模式

这里和网上已经有几篇相关的帖子，但我不太擅长 javascript（而且我很确定，它最终会出现在 JS 解决方案中）并且还没有通过阅读找到解决方案。 ..

在 PHP 中使用引导模式编辑数据

现在我刚刚学习 php 本机中的 MVC 概念，当我想使用 bootstrap 模式更新数据时遇到麻烦。 这是我试图显示我的代码结构的内容： 按钮显示模态 &l...

laravel 将数据动态卡到 1 个模态

我有一张从数据库获取数据的卡片，并且使用 @foreach 我每次都会循环它来创建卡片。 @foreach($cards 为 $c) ... 我有一张从数据库获取数据的卡片，并且使用 @foreach 我每次都会循环它来创建卡片。 @foreach($cards as $c) <div class="card_fold"> <button class="btn btn-danger top-left btn-fab btn-fab-mini btn-round "> <i class="material-icons">clear</i> </button> <button id="create" class="btn btn-default top-right btn-fab btn-fab-mini btn-round " data-toggle="modal" data-target="#imageModal"> <i class="material-icons">create</i> </button> <div class="card_fold__image-holder"> <img class="card_fold__image cover imgHolder" src="uploads/avatars/{{$c->img_src}}" alt="wave" /> </div> <div class="card_fold-title"> <a href="#" class="toggle-info btn btn-primary"> <span class="left"></span> <span class="right"></span> </a> <h2> <input type="hidden" id="getId" value="{{$c->id}}" /> <div id="nameEnglish">{{$c->englishName}}</div> <div id="nameAnime"> {{$c->animeName}}</div> <small id="age">AGE {{$c->age}}</small> </h2> </div> <div class="card_fold-flap flap1"> <div class="card_fold-description" id="content"> {{$c->content}} </div> <div class="card_fold-flap flap2"> <div class="card_fold-actions"> <a href="#" class="btn btn-primary">Read more</a> <div id="Large-content" style="display: none;"> {{$c->largeContent}} </div> </div> </div> </div> </div> @endforeach 这个想法是让 1 个模态动态连接到所有卡片。 <div class="modal fade" id="imageModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Edit image</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <form action="/editor" method="post" enctype="multipart/form-data"> @csrf <div class="modal-body"> <div class="card " style="width: 28rem;"> <img id="output" src="uploads/avatars/{{ Auth::user()->avatar }}" class="card-img-top " style="max-height: 28rem; object-fit: cover;" rel="nofollow"> <div class="card-body"> <label for="avatar" class=" btn btn-primary" style="min-width: 100%;"> Select a file </label> <input name="avatar" id="avatar" type="file" onchange="loadImg(event)" /> </div> </div> <div class="form-group"> <label for="modal-input-english-name">English Name</label> <input type="text" class="form-control" id="modal-input-english-name" placeholder="..."> </div> <div class="form-group"> <label for="modal-input-anime-name">Anime Name</label> <input type="text" class="form-control" id="modal-input-anime-name" placeholder="..."> </div> <div class="form-group"> <label for="modal-input-age">Charachter Age</label> <input type="text" class="form-control" id="modal-input-age" placeholder="..."> </div> <div class="form-group"> <label for="exampleFormControlInput1">Content</label> <textarea class="form-control" id="modal-input-content" rows="2"></textarea> </div> <div class="form-group"> <label for="exampleFormControlTextarea1">Read More Content</label> <textarea class="form-control" id="modal-input-large-content" rows="3"></textarea> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="submit" class="btn btn-primary">Save changes</button> </div> </form> </div> </div> </div> 现在所有的 id 都是相同的，我正在尝试找出一种方法来区分这些卡。这是我现在使用的 jquery，它只适用于第一张卡，因为它们都有相同的 id。在某种程度上，我需要动态添加一些东西，以便我可以区分要获取的数据。 $('#imageModal').on('shown.bs.modal', function() { var img_src = $(".card_fold__image-holder").find("img").attr("src"); var nameEnglish = document.getElementById("nameEnglish"); var nameAnime = document.getElementById("nameAnime"); var age = document.getElementById("age"); var content = document.getElementById("content"); var largeContent = document.getElementById("Large-content"); $("#modal-input-english-name").val(nameEnglish.innerHTML ); $("#modal-input-anime-name").val(nameAnime.innerHTML ); $("#modal-input-age").val(age.innerHTML ); $("#modal-input-content").val(content.innerHTML ); $("#modal-input-large-content").val(largeContent.innerHTML ); $("#output").attr("src", img_src); }); 您还必须在 foreach 循环中添加模态，如下所示，以便每个模态具有不同的 id @foreach($cards as $k=>$c) <div class="card_fold"> <button class="btn btn-danger top-left btn-fab btn-fab-mini btn-round "> <i class="material-icons">clear</i> </button> <button id="create" class="btn btn-default top-right btn-fab btn-fab-mini btn-round " data-toggle="modal" data-target="#imageModal{{$k+1}}"> <i class="material-icons">create</i> </button> <div class="card_fold__image-holder"> <img class="card_fold__image cover imgHolder" src="uploads/avatars/{{$c->img_src}}" alt="wave" /> </div> <div class="card_fold-title"> <a href="#" class="toggle-info btn btn-primary"> <span class="left"></span> <span class="right"></span> </a> <h2> <input type="hidden" id="getId" value="{{$c->id}}" /> <div id="nameEnglish">{{$c->englishName}}</div> <div id="nameAnime"> {{$c->animeName}}</div> <small id="age">AGE {{$c->age}}</small> </h2> </div> <div class="card_fold-flap flap1"> <div class="card_fold-description" id="content"> {{$c->content}} </div> <div class="card_fold-flap flap2"> <div class="card_fold-actions"> <a href="#" class="btn btn-primary">Read more</a> <div id="Large-content" style="display: none;"> {{$c->largeContent}} </div> </div> </div> </div> </div> <div class="modal fade" id="imageModal{{$k+1}}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Edit image</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <form action="/editor" method="post" enctype="multipart/form-data"> @csrf <div class="modal-body"> <div class="card " style="width: 28rem;"> <img id="output" src="uploads/avatars/{{ Auth::user()->avatar }}" class="card-img-top " style="max-height: 28rem; object-fit: cover;" rel="nofollow"> <div class="card-body"> <label for="avatar" class=" btn btn-primary" style="min-width: 100%;"> Select a file </label> <input name="avatar" id="avatar" type="file" onchange="loadImg(event)" /> </div> </div> <div class="form-group"> <label for="modal-input-english-name">English Name</label> <input type="text" class="form-control" id="modal-input-english-name" placeholder="..."> </div> <div class="form-group"> <label for="modal-input-anime-name">Anime Name</label> <input type="text" class="form-control" id="modal-input-anime-name" placeholder="..."> </div> <div class="form-group"> <label for="modal-input-age">Charachter Age</label> <input type="text" class="form-control" id="modal-input-age" placeholder="..."> </div> <div class="form-group"> <label for="exampleFormControlInput1">Content</label> <textarea class="form-control" id="modal-input-content" rows="2"></textarea> </div> <div class="form-group"> <label for="exampleFormControlTextarea1">Read More Content</label> <textarea class="form-control" id="modal-input-large-content" rows="3"></textarea> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="submit" class="btn btn-primary">Save changes</button> </div> </form> </div> </div> </div> @endforeach 对于jquery，你可以使用如下所示的东西 $(document).on('show.bs.modal', '.modal', function () { var zIndex = 1040 + (10 * $('.modal:visible').length); $(this).css('z-index', zIndex); setTimeout(function() { $('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack'); }, 0);}); 假设您的 card 有一个 id 现在我们需要 使用此 data_id id 在每个按钮上添加 card 属性 将 create id 属性更改为 class 属性 class="create" <button class="btn btn-default top-right btn-fab btn-fab-mini btn-round create" data-toggle="modal" data-id="{{ $c->id }}"> <i class="material-icons">create</i> </button> 现在每个按钮都会有一个独特的data-id 那么你的jquery代码将如下 $(".create").click(function (evt) { evt.preventDefault(); // getting the current clicked button `data-id` let data_id = $(this).data("id"); // now as you have your card id you can change any thing in the modal var img_src = $(".card_fold__image-holder").find("img").attr("src"); var nameEnglish = document.getElementById("nameEnglish"); var nameAnime = document.getElementById("nameAnime"); var age = document.getElementById("age"); var content = document.getElementById("content"); var largeContent = document.getElementById("Large-content"); $("#modal-input-english-name").val(nameEnglish.innerHTML ); $("#modal-input-anime-name").val(nameAnime.innerHTML ); $("#modal-input-age").val(age.innerHTML ); $("#modal-input-content").val(content.innerHTML ); $("#modal-input-large-content").val(largeContent.innerHTML ); $("#output").attr("src", img_src); // opening the modal $('#imageModal').modal('toggle'); }); 如上所述，这也适用于 Bootstrap Offcanvas 按钮。通过将 {{$key+1}} 添加到 Offcanvas 按钮 id=staticBackdro 和 data-bs-target=#staticBackdrop。 @foreach ($content $key => $item) <div class="col-md-3"> <button class="btn btn-primary" type="button" data-bs- toggle="offcanvas" data-bs-target="#staticBackdrop{{$key+1}}" aria- controls="staticBackdrop">Link</button> <div class="offcanvas offcanvas-start" data-bs-backdrop="static" tabindex="-1" id="staticBackdrop{{$key+1}}" aria-abelledby="staticBackdropLabel"> <div class="offcanvas-header"> <h5 class="offcanvas-title" id="staticBackdropLabel">Offcanvas</h5> <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button> </div> <div class="offcanvas-body"> <div class='off-card'> <div class='offcanvas-box'> <h5 class="offcard-title">{{$item->category}}</h5> </div> @endforeach

JQuery：多个 div 在表中的特定 ID 上以单个模式显示

我创建了多个段落，以通过表格内的按钮在特定类上以单一模式显示。我在 json 附加中创建了类“dugme_${kurs.id}”，效果很好。每个按钮都...

将内容作为组件传递时无法使用 NgbModal 获取全屏模式

我正在使用 Bootstrap 小部件，并尝试创建一个全屏模式（页眉位于顶部，页脚位于底部，正文滚动在中间）。我可以使用一些简单的 html 轻松做到这一点，如

为什么我在react文件中导入bootsrap-dark-5后出现错误？

导入'../node_modules/bootstrap-dark-5/dist/css/bootsrap-dark-5.min.css'; //错误 编译有问题：X ./src/App.js 8:0-75 中出现错误 找不到模块：错误：无法解析'../node_modules/