bootstrap-modal 相关问题

如何确定 Bootstrap 5 Modal 按钮不起作用的原因？

我有一个基于 Django 的网站，使用 bootstrap 5。我有一个数据表和一个包含大量文本的注释列。我正在尝试使用 Bootstrap Modal 弹出功能来显示要保留的注释...

如何阻止 ASP.NET div 样式重叠/渗透到周围的 div 中？

当我将 div 设置为在 ASP.NET Web 表单中可见时（是的，我知道它很古老。我从事教育工作。），红色样式从下面的 div 重叠/渗透到上面的 div 中。这些div完全是

Bootstrap Modal 成功 Ajax 调用后未关闭

我在Ajax调用中取得了成功，但提交后，它并没有隐藏。 我尝试过 .hide(); .modal('隐藏'); 这是 我在 Ajax 调用中获得成功，但提交后，它并没有隐藏。 我试过了.hide();.modal('hide'); 这里是 <div class="modal fade" id="addWorkModal" tabindex="-1" role="dialog" aria-labelledby="addWorkModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="addWorkModalLabel">Add Work</h5> </div> <div class="modal-body"> <form id="create-work-form"> {% csrf_token %} {{ work_form|crispy }} <div class="form-group"> <label for="user-id">User ID:</label> <input type="text" class="form-control" id="user-id" name="user" value="{{ client.user.id }}"> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary" id="save-work-button">Save Work</button> </div> </div> </div> </div> <script> document.getElementById('save-work-button').addEventListener('click', function() { var form = document.getElementById('create-work-form'); var formData = new FormData(form); var url = ""; console.log('URL being requested:', url); $.ajax({ url: url, type: 'POST', data: formData, processData: false, contentType: false, success: function(response) { console.log("AJAX call successful"); // Debugging if (response.work) { $('#addWorkModal').modal('hide'); } else { // Handle errors from response var errorText = 'Error creating work: ' + JSON.stringify(response.errors || 'Unknown error'); console.error(errorText); // Log error to the console instead of alerting } }, error: function(xhr, status, error) { var errorMsg = 'An error occurred. Status: ' + status + '. Error: ' + error; if(xhr.responseText) { errorMsg += '. Response: ' + xhr.responseText; } console.error(errorMsg); // Log error to the console instead of alerting } }); }); 我的问题提交表单后，如何自动关闭或隐藏模式，因为它不会在提交后出现。 尝试更换这个： $('#addWorkModal').modal('hide'); 这样： document.getElementById('addWorkModal').style.display = 'none'; 并告诉我是否有帮助。

引导模式在 Angular 应用程序中不起作用

我正在尝试使用 HTML 中的类在 Angular 应用程序中使用 Bootstrap 模式，但它不起作用 - 它没有显示为模式 我正在尝试使用 HTML 中的类在 Angular 应用程序中使用 Bootstrap 模式，但它不起作用 - 它没有显示为模式 <div class="modal text-center" *ngIf="showmodal" tabindex="-1" id="withScrollExampleModal"> <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title fw-normal">Basic dialogue title</h4> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"> <i class="fa-light fa-circle-xmark"></i> </button> </div> <div class="modal-body f-14"> <p>Lorem ipsum dolor sit amet consectetur. Enim libero commodo nibh vitae sed laoreet magna dui pharetra. </p> </div> <div class="modal-footer d-flex justify-content-center"> <button type="button" class="btn btn-secondary rounded-pill" data-bs-dismiss="modal">Action 1</button> <button type="button" class="btn btn-outline-primary rounded-pill">Action 2</button> </div> </div> </div> </div> Bootstrap 具有用于打开和关闭模式的内置函数。 例如，有一个应该打开模态的按钮，在该按钮中需要有像 data-toggle="modal" 这样的数据切换以及像 data-target="#Id of the modal" 这样的模态的目标 ID 此外，模态本身必须有一个名为“模态”的类和一个 id。此 id 必须与数据目标相同。 这是模态的示例。 <!-- Button trigger modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"> Launch demo modal </button> <!-- Modal --> <div class="modal fade" id="exampleModal" 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">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> 为此，请确保在头部导入以下项目 <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> 有关引导程序中模态的更多信息，请访问以下链接 https://getbootstrap.com/docs/4.0/components/modal/

Bootstrap Modal 正在工作，但其提交按钮不起作用

<!DOCTYPE html> <html> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" /> <link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet" /> </head> <div class='dashboard-content'> <div class='container'> <br> <h2 class="blue">Finance Department</h2> <div class="table-responsive text-nowrap"> <table class="table table-striped table-hover table-fixed"> <thead> <tr bgcolor="#196F3D" class="text-white"> <th scope="col" class="text-center">#</th> <th scope="col" class="text-center">Designation</th> <th scope="col" class="text-center">Edit</th> <th scope="col" class="text-center">Delete</th> </tr> </thead> <tbody> <tr> <td class="text-center">1</td> <td>Account Manager</td> <td class="text-center"><a href="#" data-toggle="modal" data-target="#primary0"><button type=button class="font-awesome-btn"> <i class="fa fa-edit" aria-hidden="true"></i> Edit </button></a> <!-- Modal --> <div class="modal fade" id="primary0" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <form action="/editDesignation" method="post"> <div class="modal-dialog" backdrop="static" keyboard="false"> <div class="modal-content"> <!-- Modal Header --> <div class="modal-header modal-header-primary"> <button type="button" class="close order-1" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true"><i class="fa fa-times" aria-hidden="true"></i></span> </button> <h4> <i class="fa fa-edit" aria-hidden="true"></i> Updating Designation </h4> </div> <h3>Please write new value for:</h3> <span class=red>Account Manager</span> <form action="/editDesignation" method="post"> <input type="hidden" name="designationId" value="6"><input type="text" name="designation" value=""> </div> <!-- Modal footer --> <div class="modal-footer"> <button type="submit"> <i class="fa fa-save" aria-hidden="true"></i> Save Changes </button> </form> <button type=button class="font-awesome-btn" data-dismiss="modal"> <i class="fa fa-times" aria-hidden="true"></i> Close </button> </div> </div> <!-- /.modal-content --> </div> <!-- /.modal-dialog --> </div> <!-- /.modal --> </td> <td class="text-center"><a href="#" data-toggle="modal" data-target="#danger0"><button type="submit"> <i class="fa fa-trash" aria-hidden="true"></i> Delete </button></a> <!-- Modal --> <div class="modal fade" id="danger0" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <form action="deleteUrl()" method="post"> <div class="modal-dialog" backdrop="static" keyboard="false"> <div class="modal-content"> <!-- Modal Header --> <div class="modal-header modal-header-danger"> <button type="button" class="close order-1" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true"><i class="fa fa-times" aria-hidden="true"></i></span> </button> <h4> <i class="fa fa-check-circle" aria-hidden="true"></i> Are you sure you want to delete </h4> </div> <h3 class=red>Account Manager</h3> <form action="/deleteDesignation" method="post"> <input type="hidden" name="designationId" value="6"> <div> <!-- Modal footer --> <div class="modal-footer"> <button type="submit"> <i class="fa fa-check-circle" aria-hidden="true"></i> Yes </button> </form> <button type=button class="font-awesome-btn" data-dismiss="modal"> <i class="fa fa-times" aria-hidden="true"></i> No </button> </div> </div> <!-- /.modal-content --> </div> <!-- /.modal-dialog --> </div> <!-- /.modal --> </td> </tr> </tbody> </table> </div> <br> <br> </div> </div> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script> </body> </html> 我正在尝试向用户显示引导模式警报以编辑记录。弹出窗口正在打开，但不知道为什么它的提交按钮不起作用。我检查了详细信息，但过去两天一直在解决这个问题。有错误的地方请指教 我无法提交我的问题，因为系统说需要更多解释 感谢期待 请做类似的事情 <button class="btn btn-primary "> /*Your code like icons etc */ 没有像 font-awsome-btn 这样的类。在你已经添加的库中，但在引导程序中你有一个按钮类btn，它的样式可以通过btn-danger红色按钮添加 更多款式看这里

Bootstrap 模态在 blazor 页面中的定位

我在网络编码领域相当陌生，所以如果有一些我不知道的明显错误，我很抱歉。我正在挑战自己在我正在开发的玩具项目中使用模态，但我有......

onclick 链接在弹出窗口内不起作用

爆米花 <div class="card-body"> <h5 class="mb-0">Popovers</h5> <hr /> <div class="row row-cols-auto g-3"> <div class="col"> <button type="button" class="btn btn-primary btn-danger pop-basic" data-bs-toggle="popover" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button> </div> <div class="col"> <a id="popover-button1" class="btn btn-primary btn-warning" data-toggle="popover" tabindex="0">Popover HTML content from DIV 1</a> </div> </div> </div> <!-- Content for Popover #1 (Width taken form popover.css as not specified)--> <div id="popover-content1" class="popover-content" style="display: none;"> <b>Popover1 HTML content goes here</b> <br> <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus.Vivamus sagittis lacus vel augue laoreet rutrum faucibus.Vivamus sagittis lacus vel augue laoreet rutrum faucibus.</p> <a title="Remove Query" onclick="delete()"> <i class="bx bx-trash"></i></a> </div> 此图标在控制台中显示一条消息 <a title="Remove Query" onclick="delete()"> <i class="bx bx-trash"></i></a>&nbsp; </a> function delete() { console.log("delete this query"); } 上面代码中的锚标记不适用于将消息记录到控制台的功能 如何做到这一点？ 谢谢你 您应该尝试使用deleteQuery <a title="Remove Query" onclick="deleteQuery()"> <i class="bx bx-trash"></i></a>

在移动设备上的传单地图上滚动模式的错误

我在传单地图上有一个引导模式。 当我在 Chrome 移动或三星移动浏览器上滚动模式时，浏览器的导航栏消失，这会增加显示高度。那个额外的

Django Bootstrap 模式表单缺少 csrf 令牌

我正在使用 django 引导模式表单进行登录和注册弹出窗口，但它们缺少 csrf 令牌，我收到“来自 POST 的 CSRF 令牌不正确”。注册或登录时出错。 我有 {% ...

是否可以使用 ngIf 条件在 Angular 中显示 Bootstrap 5 模式弹出窗口？

这里的挑战来自这样一个事实：当使用 ngIf 有条件地显示模态时，当页面加载时，模态元素最初不存在于 DOM 中，因为默认情况下它......

第二个模态窗口未显示

我使用 bootstrap 添加了 2 个模式窗口。第一个是将用户添加到数据库，第二个是编辑用户。所以第一个工作完美，但负责编辑 u 的那个......

以角度方式调用引导模式关闭上的函数（通过转义按钮和任何其他方式）

我正在使用角度。我有 Bootstrap 模式弹出窗口。我在函数关闭时调用了它。但问题是还有其他方法可以关闭，例如按退出按钮或简单地单击...

当我在构造函数中声明另一个服务时，我的模态服务未打开

所以我得到了这个以角度登录的方法 电子邮件：字符串=“”； 密码：字符串=“”； 登录（） { 常量凭据 = { 电子邮件：这个.电子邮件， 密码：this.passwo...

为什么填充在我的 Bootstrap 5.3 页面中不起作用？

为什么pe-5 不起作用？ 为什么pe-5不起作用？ <head> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"> </head> <body> <header class="bg-info"> <div class="row text-white"> <div class="col-md-6 p-4 pe-5 "> <h2 class="">Adhnan M Y</h2> </div> <div class="col-md-6"> </div> </div> </header> </body> 也许是因为您正在使用：使用 p-4 进行常规填充，然后使用 pe-5 进行特定填充 您的行周围没有所需的 .container 或 .container-fluid 类，因此行间距会导致水平溢出。这可能会给人留下您的填充不存在的印象。 https://getbootstrap.com/docs/5.3/layout/grid/#example <head> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"> </head> <body> <header class="container-fluid bg-info"> <div class="row text-white"> <div class="col-md-6 p-4 pe-5 "> <h2 class="">Adhnan M Y</h2> </div> <div class="col-md-6"> </div> </div> </header> </body>

如何立即打开Bootstrap 5 Modal然后加载AJAX内容

在加载 AJAX 内容之前，Bootstrap 5 Modal 不会打开。对于我的用户来说，这是一个糟糕的用户体验，因为用户在单击“查看”按钮后必须等待几秒钟才能打开模式！ 所以话虽这么说

通过API点击获取模态中的特定用户数据

我只获取用户 ID 或 fName 等，但无法在模式（弹出窗口）中立即获取所有详细信息。我只想在模式中获取一个特定的用户数据。 HTML代码 我只获取用户 ID 或 fName 等，但无法在模式（弹出窗口）中立即获取所有详细信息。我只想在模式中获取一个特定的用户数据。HTML 代码<table class="table table-striped "> <thead> <tr> <th scope="col">#ID</th> <th scope="col">First</th> <th scope="col">Last</th> <th scope="col">Gender</th> <th scope="col">User Detail</th> </tr> </thead> <tbody> <tr *ngFor="let user of newdata.users;"> <td>{{user?.id}}</td> <td>{{user?.firstName}}</td> <td>{{user?.lastName}}</td> <td>{{user?.gender}}</td> <td> <button type="button" class="btn btn-info btn-lg" (click)="openModal()">See Details</button> </td> </tr> </tbody> </table> 在 .ts 文件中，我可以从 API 获取所有数据。但我想尝试获取一个用户数据，单击按钮（open）=“openModal（）”.ts 代码 newdata:any = { users: [] }; constructor (private userAPIData:StudentDataService){} selectedUser:any; UserClicked(newdata:any){ let selectedUser = JSON.stringify(newdata); // this.selectedUser=newdata; alert(selectedUser); } ngOnInit(): void { this.userAPIData.getdata().subscribe(res =>{ // this.newdata= Object.values(res); this.newdata = res; console.log(this.newdata.users) }) } display = "none"; openModal() { this.display = "block"; } onCloseHandled() { this.display = "none"; } 像这样在方法内传递用户对象 html (open)="openModal(user)" ts openModal(user: any) { let selectedUser = JSON.stringify(user); // this variable contains the user details // this.selectedUser=newdata; alert(selectedUser); this.display = "block"; }

Laravel 10，Livewire 2：提交页面的模式中的分页

莫代尔 莫代尔 <div class="modal fade" id="usersModal" tabindex="-1" wire:ignore.self> <div class="modal-dialog modal-fullscreen d-flex"> <div class="modal-content" style="background: rgba(9, 30, 62, .8);"> <div class="modal-header border-0"> <button type="button" class="btn bg-white btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body my-0 w-100"> <div class="container"> <div class="row"> <div class="col-12"> <div class="card py-1 px-1 bg-light-yellow"> <div class="card-header d-flex align-items-center justify-content-between"> <h3 class="card-title flex-grow-1">Liste des utilisateurs</h3> <div class="card-tools d-flex align-items-center"> <button class="btn btn-yellow text-white me-4" type="button" title="Créer un utilisateur"> <i class="fas fa-user-plus"></i> </button> <div class="input-group input-group-sm" style="width: 150px;"> <input type="text" name="table_search_user" id="table_search_user" placeholder="Chercher.." class="form-control float-right py-3 border border-yellow border-end-0"> <div class="input-group-append bg-yellow text-white border border-start-0"> <div class="input-group-text inputModal"> <span class="fas fa-search py-1"></span> </div> </div> </div> </div> </div> <div class="card-body table-responsive p-0" style="height: 500px;"> <table class="table table-head-fixed text-nowrap bg-white"> <thead> <tr> <th>Users</th> <th>Roles</th> <th class="text-center">Actions</th> </tr> </thead> <tbody> @foreach ($theUsers as $theUser) <tr> <td>{{ $theUser->fullName }} </td> <td> <button type="button" class="btn btn-default" data-bs-toggle="tooltip" data-bs-title="Permissions: {{ $theUser->getPermissionsViaRoles()->implode('name', ' | ') }}"> {{ $theUser->getRoleNames()->first() }} </button> </td> <td class="text-center"> <button class="btn btn-yellow-white" title="Update"> <i class="fas fa-edit"></i> </button> <button class="btn btn-yellow-white" title="Delete"> <i class="fas fa-trash-alt" style="color: #d00625;"></i> </button> </td> </tr> @endforeach </tbody> </table> </div> <div class="card-footer clearfix"> {{ $theUsers->links() }} </div> </div> </div> </div> </div> </div> </div> </div> </div> 控制器 <?php namespace App\Http\Livewire; use App\Models\User; use Livewire\Component; use Livewire\WithPagination; class Utilisateurs extends Component { use WithPagination; // <-| If i use These commands, the pagination doesn't work, protected $paginationTheme= "bootstrap"; // <-| & if i remove its the pagination work but the page submitting. public function render() { $theUsers = User::paginate(5); return view('livewire.utilisateur.utilisateurs', compact('theUsers')); } } 在控制器中，如果我使用： use WithPagination； protected $paginationTheme= "bootstrap"; 命令显示分页，但在用户模式列表中不起作用，但如果我删除它，分页可以工作，但页面提交和模式被隐藏。 如果我单击分页链接中的下一页，有人可以帮助我设置模式显示和页面不提交。谢谢你。 :) 我解决了问题。我忘记在母版页中添加 @livewireStyles 和 @livewireScripts。现在可以工作了。

Bootstrap + 角度模态编辑字段数据不可见

我是 Angular 新手。我正在尝试在 Bootstrap 模式中以 Angular 构建一个简单的表单，并对数据执行编辑功能。当我 console.log 是否正在相应地获取数据时，...

刺激中的 Rails 7 和 Bootstrap 错误 - 无法解析模块说明符 bootstrap

我正在关注本教程：https://www.hotrails.dev/articles/rails-modals-with-hotwire一切顺利，直到我创建这个刺激控制器文件： 从“@hotwired/

从按钮将数据传递到模态

我想使用查询参数向我的 django 视图发出发布请求。查询参数来自 html 模板。在模板中的接受按钮上，将打开一个模式。并且有一个接受按钮......