bootstrap-modal 相关问题

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

我在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'; 并告诉我是否有帮助。

javascript html jquery ajax bootstrap-modal

回答 1 投票 0

引导模式在 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 type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"> Launch demo modal </button>  <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">×</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/

javascript html angular bootstrap-modal angular-ui-bootstrap

回答 1 投票 0

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>  <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">  <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>  <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>  </div>  </div>  </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>  <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">  <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>  <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>  </div>  </div>  </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红色按钮添加更多款式看这里

javascript html bootstrap-4 bootstrap-modal popper.js

回答 1 投票 0

Bootstrap 模态在 blazor 页面中的定位

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

blazor bootstrap-modal

回答 2 投票 0

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>  <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>  </a> function delete() { console.log("delete this query"); } 上面代码中的锚标记不适用于将消息记录到控制台的功能如何做到这一点？谢谢你您应该尝试使用deleteQuery <a title="Remove Query" onclick="deleteQuery()"> <i class="bx bx-trash"></i></a>

html bootstrap-modal bootstrap-popover

回答 1 投票 0

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

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

leaflet bootstrap-modal vue2leaflet

回答 1 投票 0

Django Bootstrap 模式表单缺少 csrf 令牌

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

django django-views django-forms bootstrap-modal csrf-token

回答 1 投票 0

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

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

angular bootstrap-modal bootstrap-5 angular-ng-if

回答 1 投票 0

第二个模态窗口未显示

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

javascript html jquery css bootstrap-modal

回答 1 投票 0

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

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

javascript css angular bootstrap-modal

回答 3 投票 0

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

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

angular typescript bootstrap-modal bootstrap-5

回答 1 投票 0

为什么填充在我的 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>

html twitter-bootstrap bootstrap-modal bootstrap-5 padding

回答 2 投票 0

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

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

javascript jquery ajax twitter-bootstrap bootstrap-modal

回答 1 投票 0

通过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"; }

javascript angular typescript bootstrap-modal

回答 1 投票 0

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-modal laravel-livewire

回答 1 投票 0

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

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

angular bootstrap-modal edit simplemodal two-way-binding

回答 1 投票 0

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

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

ruby-on-rails bootstrap-modal bootstrap-5 ruby-on-rails-7 stimulusjs

回答 1 投票 0

从按钮将数据传递到模态

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