bootstrap-modal 相关问题

如何在 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/

如何在 Angular 2 中关闭模式？

我希望用户单击“提交”按钮，模式会自动关闭。 如果我在 Submit 中添加 data-dismiss="modal"，它将不会运行 SubmitComments()。 我尝试做类似 $('# 我希望用户单击“提交”按钮，模式会自动关闭。 如果我在提交data-dismiss="modal"中添加<button>，它将不会运行submitComments()。 我尝试做类似$('#myModal').modal('hide');的事情，但没有成功。 那么如何在 Angular 2 中关闭模态框呢？谢谢 <button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal">Open Modal</button> <div id="myModal" class="modal fade"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-body"> <form (ngSubmit)="submitComments()"> <div class="form-group row"> <label class="form-control-label col-sm-2">Comments:</label> <div class="col-sm-10"> <textarea class="form-control" rows="3"></textarea> </div> </div> <div class="form-group row"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-default">Submit</button> </div> </div> </form> </div> </div> </div> </div> . submitComments() { // I want to do something like $('#myModal').modal('hide'); here. } 使用 @ViewChild 使用 #closeBtn 将 data-dismiss="modal" 添加到元素 <a><i class="fa fa-close" data-dismiss="modal" #closeBtn></i></a> 组件 html <div class="modal fade" id="yourModalId"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <a><i class="fa fa-close" data-dismiss="modal" #closeBtn></i></a> </div> <div class="modal-body"> </div> <div class="modal-footer"> </div> </div> </div> </div> 使用 this.closeBtn.nativeElement.click(); 触发点击事件将关闭您的模态框。 组件打字稿 import {ViewChild, ElementRef} from '@angular/core'; @Component({ moduleId: ..., selector: '.', templateUrl: '.', styleUrls: ['.'] }) export class yourClass { @ViewChild('closeBtn') closeBtn: ElementRef; yourFunction() { //do something ... ... //close your modal this.closeModal(); } //call this wherever you want to close modal private closeModal(): void { this.closeBtn.nativeElement.click(); } } 您可以通过简单地在 Angular2 控制器中声明任何类型的 jQuery 变量来完成此操作。 declare var jQuery:any; 将其添加到 import 语句之后和组件装饰器之前。 然后使用它的 id 访问引导模式，如下所示。 jQuery("#myModal").modal("hide"); 除了@MattScarpino的答案之外，另一种选择是将按钮类型从 button 更改为 submit 并调用你的函数 submitComments()，同时拨打dismiss-modal。 通过这样做，您也可以同时关闭模式和调用功能，希望这可以帮助您。 这是例子： <button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal">Open Modal</button> <div id="myModal" class="modal fade"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-body"> <form> <div class="form-group row"> <label class="form-control-label col-sm-2">Comments:</label> <div class="col-sm-10"> <textarea class="form-control" rows="3"></textarea> </div> </div> <div class="form-group row"> <div class="col-sm-offset-2 col-sm-10"> <button type="button" (click)='submitComments()' data-dismiss="myModal" class="btn btn-default">Submit</button> </div> </div> </form> </div> </div> </div> </div> #更新 如果您想从控制器端关闭模态，您可以使用这种方式 $("#myModal").modal("hide"); 首先，将 div 的 hidden 属性设置为等于变量： <div id="myModal" [hidden]="hideModal" class="modal fade"> 其次，在类中定义一个名为 hideModal 的布尔值并将其设置为 false： hideModal: boolean = false; 第三，在 submitComments() 中，将 hideModal 设置为 true。 这个宇宙中的完美答案................................. 第1步：为模态的关闭按钮提供唯一的ID 第2步：成功提交表格或完成任务调用后 document.getElementById("addProductCloseButton").click(); 在你的班级 我使用了其中一个答案，并进行了一些编辑，它的工作对我来说非常完美， 我希望它可以帮助尝试将“yourmodal”更改为您的目标模式名称 你应该使用按钮而不是 i <button hidden="hidden" class="fa fa-close" data-dismiss="modal" id="closeBtn" #closeBtn (click)="yourModal.close()"></button> 组件 html <div style="margin-top: 0px !important;"> <button type="button" id="openModal" #openModal class="btn btn-fab-mini btn-outline-primary" style="float:right" (click)="yourModal.open()"><strong>click here to open modal</strong></button> <modal #yourModal> <ng-template #modalHeader> <button hidden="hidden" class="fa fa-close" data-dismiss="modal" id="closeBtn" #closeBtn (click)="yourModal.close()"></button> </ng-template> <ng-template #modalBody> <yourmodalSelectorname></yourmodalSelectorname> </ng-template> <ng-template #modalFooter></ng-template> </modal> </div> 打字稿 import {ViewChild, ElementRef} from '@angular/core'; @Component({ moduleId: ..., selector: '.', templateUrl: '.', styleUrls: ['.']}) yourFunction() { //do something ... ... //close your modal this.closeModal(); } //call this wherever you want to close modal private closeModal(): void { this.closeBtn.nativeElement.click(); } 尽量不要将表单包含在模态主体中，而是在页脚部分添加两个相同的按钮。 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><span aria-hidden="true">&times;</span></button> </div> <div class="modal-body"> <label class="form-control-label col-sm-2">Comments:</label> <div class="col-sm-10"> <textarea class="form-control" rows="3"></textarea> </div> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Close</button> <button type="submit" class="btn btn-primary" >Save changes</button> </div> </div> </div> </div> 我有更好的解决方案。 当您打开模态时，保存模态参考： this.modalRef = this.modalService.open() 然后当您需要简单地关闭模式时： this.modalRef.close() 这是关闭角度弹出模式的简单步骤 在你的 component.ts 文件中包含这些行 import '../../../assets/js/custom.js'; declare var closepopup:any; 客户文件路径取决于您的目录结构 在客户文件中包含此功能 function closepopup() { $(".modal").modal('hide'); } 在此之后，如果您对表单验证事件表单数据有条件验证，那么您想要关闭弹出模式 然后包括这一行 关闭弹出窗口（）； 如果您仍然面临问题，请告诉我，我会为您服务 只需在关闭按钮中声明 id = "close_model" 并将此代码放入要关闭模型的函数中:: window.document.getElementById("close_model").click() ;