Bootstrap提供了一个JavaScript驱动的对话框元素，可用于替换原生对话框（在某种程度上）;与原生对话框不同，Bootstrap模式不能阻止执行流程。
为什么填充在我的 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 不会打开。对于我的用户来说，这是一个糟糕的用户体验，因为用户在单击“查看”按钮后必须等待几秒钟才能打开模式！ 所以话虽这么说
我只获取用户 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。现在可以工作了。
我是 Angular 新手。我正在尝试在 Bootstrap 模式中以 Angular 构建一个简单的表单，并对数据执行编辑功能。当我 console.log 是否正在相应地获取数据时，...
刺激中的 Rails 7 和 Bootstrap 错误 - 无法解析模块说明符 bootstrap
我正在关注本教程：https://www.hotrails.dev/articles/rails-modals-with-hotwire一切顺利，直到我创建这个刺激控制器文件： 从“@hotwired/
我想使用查询参数向我的 django 视图发出发布请求。查询参数来自 html 模板。在模板中的接受按钮上，将打开一个模式。并且有一个接受按钮......
我想在关闭按钮不起作用的情况下使用模式弹出窗口。这些是以下问题。 我想在 @using (H...
如何在不关闭旧模态的情况下打开多个 Bootstrap 5 模态？
对于我的项目，我使用 bootstrap 5.2 及之前的版本，如 bootstrap 3。在 3 中，可以打开多个模态，例如前面的模态，然后打开一个新模态，依此类推。模态窗口与每个
我在 .NET MVC5 应用程序中有一个引导模型。我的客户端验证正在工作（jquery 在 MVC 中不引人注目），但问题是即使出现错误，我的模式也会不断关闭。我怎样才能预先...
如何使用 jquery 选择器通过 {{ $item->id }} 选择 Bootstrap Modal
我注意到当 select2 处于模态时，搜索输入不可聚焦，向上和向下键也不起作用。 jQuery：3.6.1 选择2：4.1.0 我想使用 jquery 选择器来查找...
引导模式未显示。我已经包含了所有必要的文件。 我尝试过将 JS 文件移至之前和之前，但没有一个起作用。我在 jsfiddle 上尝试了我的代码，但无法...
我正在构建一个带有导航栏和表格的简单网页。表行是通过从数据库异步获取数据的简单 JS 脚本生成的。 为了方便我决定使用 Bootstrap5，但是......
Angular 6 - 将组件显示为来自组件的模式对话框。ts
在从组件执行提交操作后，我尝试显示模式确认弹出窗口。 我的 home.component.ts 中的 onSubmit() 方法： onSubmit() { var 响应 = 新响应...
我在 Bootstrap 中遇到了一个严重的模态问题。 当我在我的网站中打开模态框时，绝对没有问题（模态打开类正确添加到主体上）模态是正确的，...
尽管我尝试在 Bootstrap v3.3.7 模型中显示日期时间选择器，但它并未完全显示。日期时间选择器部分可见，部分隐藏；同样，这个问题
Asp.net Core MVC 6 - 引导模式绑定布尔？复选框
我在布尔值在部分模态引导视图上保持其值时遇到问题。 模型中有一个布尔属性 [必需的] 公共布尔？ IsActive { 获取；放; } ...
这是我第一次使用引导程序。我将它用于移动断点的手风琴页脚。现在的问题是引导程序正在设置其他断点，我不希望其余的断点......
使用两个模态时，在第二个模态关闭时，第一个模态的滚动将隐藏。 可以在这里看到一个示例（这不是我的代码，我只是用它来展示我的问题是什么）。我的第一个模组...
asp.net 6 mvc 视图模态和 javascript
我正在使用asp.net 6 mvc。 在我看来，我这里确实有这个按钮： 我正在使用 asp.net 6 mvc。 在我看来，我确实有这个按钮在这里： <div class="d-flex my-4"> <a href="#" class="btn btn-md btn-info me-2" data-bs-toggle="modal" data-bs-target="#task_modal">Generate Report</a> </div> 单击它会打开以下模态： <!--begin::Modal - Upgrade plan--> <div class="modal fade global-modal" id="task_modal" tabindex="-1" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered mw-650px" id="task-modal-content-container"> <!--begin::Modal content--> <div class="modal-content rounded"> <!--begin::Modal header--> <div class="modal-header pb-0 border-0 justify-content-end"> <!--begin::Close--> <div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal"> <i class="ki-duotone ki-cross fs-1"><span class="path1"></span><span class="path2"></span></i> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1" transform="rotate(-45 6 17.3137)" fill="currentColor"></rect> <rect x="7.41422" y="6" width="16" height="2" rx="1" transform="rotate(45 7.41422 6)" fill="currentColor"></rect> </svg> </div> <!--end::Close--> </div> <!--End::Modal header--> <div class="mb-2 text-center"> <!--begin::Title--> <h1 class="mb-3">@Model.Title</h1> <!--end::Title--> <!--begin::Description--> <div class="text-muted fw-semibold fs-5"> Created By : @Model.CreatorName </div> <!--end::Description--> </div> <!--begin::Modal body--> <div class="modal-body scroll-y px-10 px-lg-15 pt-0 pb-15"> <div class="mb-13 text-center"> <!--begin::Title--> <h1 class="mb-3 meeting-title-element"></h1> <!--end::Title--> <!--begin::Description--> <div class="text-muted fw-semibold fs-5 meeting-description-element"> </div> <!--end::Description--> </div> <form novalidate data-kt-path="SaveNewMeeting" class="form flex-lg-row kt_glabal_form" enctype="multipart/form-data data-kt-load-data="true"> <input type="hidden" value="@Model.Id" name="MeetingId" /> <div class="row mb-3"> <label class="col-form-label col-lg-4 required"> <span>Next Meeting From</span> @*<i class="fas fa-exclamation-circle ms-1 fs-7" data-bs-toggle="tooltip" aria-label="Result within 12 to 48 hours" data-kt-initialized="1"></i>*@ </label> <!--begin::Col--> <div class="col-lg-8 fv-row fv-plugins-icon-container"> <input class="form-control form-control-lg form-control-solid kt_flatpickr_Time from-date-input" placeholder="Select a From Date" name="DateFrom" eltype="text"> </div> </div> <div class="row mb-3"> <label class="col-form-label col-lg-4 required"> <span>Next Meeting To</span> @*<i class="fas fa-exclamation-circle ms-1 fs-7" data-bs-toggle="tooltip" aria-label="Result within 12 to 48 hours" data-kt-initialized="1"></i>*@ </label> <!--begin::Col--> <div class="col-lg-8 fv-row fv-plugins-icon-container"> <input class="form-control form-control-lg form-control-solid kt_flatpickr_Time flatpickr-input" placeholder="Select a To Date" name="DateTo" eltype="text"> </div> </div> @* <div class="row mb-3"> <label class="col-form-label col-lg-4 required"> <span>Remark</span> </label> <!--begin::Col--> <div class="col-lg-8 fv-row fv-plugins-icon-container"> <textarea id="remarksTextArea" class="form-control mb-2" data-kt-autosize="true" eltype="text" name="RemarksDescription" placeholder="Remark" data-kt-initialized="1" style="overflow: hidden; overflow-wrap: break-word; resize: none;"></textarea> <div class="fv-plugins-message-container invalid-feedback"></div> </div> </div> *@ <div class="d-flex justify-content-end mb-2 mx-2"> <!--begin::Button--> <button type="reset" data-bs-dismiss="modal" id="kt_modal_new_target_cancel" class="btn btn-light me-3">Cancel</button> <!--end::Button--> <!--begin::Button--> <button type="submit" id="kt_ecommerce_add_category_submit" class="btn btn-primary"> <span class="indicator-label">Save</span> <span class="indicator-progress"> Please wait... <span class="spinner-border spinner-border-sm align-middle ms-2"></span> </span> </button> <!--end::Button--> </div> </form> <!--begin:Form--> <!--begin::Heading--> <!--end::Heading--> <!--begin::Actions--> @* <div class="text-center"> <button type="reset" id="kt_modal_new_target_cancel" data-bs-dismiss="modal" class="btn btn-light me-3"> Cancel </button> <button type="submit" id="kt_modal_new_target_submit" class="btn btn-primary"> <span class="indicator-label"> Save </span> <span class="indicator-progress"> Please wait... <span class="spinner-border spinner-border-sm align-middle ms-2"></span> </span> </button> </div> *@ <!--end::Actions--> <!--end:Form--> </div> <!--end::Modal body--> </div> <!--end::Modal content--> </div> </div> <!--End::Modal - Upgrade plan--> 在此模块中，用户可以选择起始日期和结束日期，然后单击提交按钮将创建一个新会议。 现在我有这个 jquery 用于我的日期选择器 $(".kt_flatpickr_Time").flatpickr({ //onReady: function () { // this.jumpToDate("2022-01") //}, altInput: true, enableTime: true, dateFormat: "Y-m-d H:i", altFormat: "F j, Y H:i", //defaultDate: "today", minDate: "today", minTime: minTime, mode: "single" }); 用户可以选择会议的日期和时间。 现在我面临的问题是，在我单击“截止日期”并选择任何日期后，“起始日期”flatpickr 会自动打开，因此我得到两个可以在其中选择日期的字段，但我只能从第一个字段中选择. 我该如何解决这个问题，因为当我在视图页面中使用这种类型的模态时，我遇到了很多错误。 我尝试了不同的方法，做了很多研究，但仍然遇到同样的问题。 我没有在我这边重现你的问题，这是我的测试： 根据症状，我认为我们可能会尝试为每个日期时间选择器提供一个ID，并使用ID选择器而不是类选择器初始化日期时间选择器，这样我们就可以避免多选问题。或者我们可以使用range模式而不是single模式，这样我们就只有一个日期时间选择器。 ================更新================== 这次我可能会重现你的问题。 当我们单击日期时间选择器时，相应的日历具有 open 类，但是当我们单击 to time 的日历的任何位置时，它会将 open 类添加到 from time 日期选择器中。 这次我将所有 class 保留在代码中，我看到了意外的行为，恐怕这是一个“不兼容”问题，因为我确实删除了一些类。我相信使用 range 模式可能是一种可以节省大量时间的解决方法。