bootstrap-modal 相关问题

我正在使用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> 单击它会打开以下模态：  <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">  <div class="modal-content rounded">  <div class="modal-header pb-0 border-0 justify-content-end">  <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>  </div>  <div class="mb-2 text-center">  <h1 class="mb-3">@Model.Title</h1>   <div class="text-muted fw-semibold fs-5"> Created By : @Model.CreatorName </div>  </div>  <div class="modal-body scroll-y px-10 px-lg-15 pt-0 pb-15"> <div class="mb-13 text-center">  <h1 class="mb-3 meeting-title-element"></h1>   <div class="text-muted fw-semibold fs-5 meeting-description-element"> </div>  </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>  <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>  <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>  <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">  <button type="reset" data-bs-dismiss="modal" id="kt_modal_new_target_cancel" class="btn btn-light me-3">Cancel</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>  </div> </form>     @* <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> *@   </div>  </div>  </div> </div>  在此模块中，用户可以选择起始日期和结束日期，然后单击提交按钮将创建一个新会议。现在我有这个 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 模式可能是一种可以节省大量时间的解决方法。

javascript c# asp.net-mvc model-view-controller bootstrap-modal

回答 1 投票 0

Bootstrap 模式未向 django 视图发送请求以渲染模型表单

我目前正在开发一个管理生物样本库存的 django 项目。我有一个样本详细信息页面，它呈现四个表格，其中包含与所选样本相关的数据。在 e...

django django-forms bootstrap-modal

回答 1 投票 0

与锚标记一起使用时出现 Bootstrap5 模态错误

我创建了一个带有垃圾图标的锚标记，该图标会触发删除模式。必须按“是”或“否”按钮，才能进一步访问各自的 api。以下是反应组件的一部分：我创建了一个带有垃圾图标的锚标记，它会触发删除模式。必须按“是”或“否”按钮，才能进一步访问各自的 api。以下是反应组件的一部分： <a data-testid="deleteEventModalBtn" className={styles.icon} data-bs-toggle="modal" data-bs-target={`#deleteEventModal${props.id}`} > <i className="fa fa-trash"></i> </a> <div className="modal fade" id={`deleteEventModal${props.id}`} tabIndex={-1} role="dialog" aria-labelledby={`deleteEventModalLabel${props.id}`} aria-hidden="true" > <div className="modal-dialog" role="document"> <div className="modal-content"> <div className="modal-header"> <h5 className="modal-title" id={`deleteEventModalLabel${props.id}`} > {t('deleteEvent')} </h5> <Button type="button" className="close" data-dismiss="modal" aria-label="Close" > <span aria-hidden="true">×</span> </Button> </div> <div className="modal-body">{t('deleteEventMsg')}</div> <div className="modal-footer"> <Button type="button" className="btn btn-danger" data-dismiss="modal" > {t('no')} </Button> <Button type="button" className="btn btn-success" onClick={deleteEvent} data-testid="deleteEventBtn" > {t('yes')} </Button> </div> </div> </div> </div> 但是当我单击垃圾桶图标时，我收到一些有关引导程序的错误。 ERROR ne.getInstance(...) is null ./node_modules/bootstrap/dist/js/bootstrap.min.js/</<@http://localhost:3000/static/js/bundle.js:147739:13 i@http://localhost:3000/static/js/bundle.js:146670:53 有人可以帮助我吗？我本来希望获得删除模式，但是当我单击垃圾桶图标时，它给了我上述错误。你仍然可以使用，并用很棒的 css 来装饰它。请查看此文档以获取一些很好的示例 https://getbootstrap.com/docs/4.0/components/modal/

reactjs bootstrap-modal bootstrap-5

回答 1 投票 0

将数据插入数据库后如何加载模态作为警报？

将数据插入数据库后弹出模式时遇到问题。因此，在 tambahnotis.php 中，我有一个表单供用户输入要插入数据库的数据。在 tambahnotis.php 的头部，我有...

php html modal-dialog bootstrap-modal simplemodal

回答 1 投票 0

引导模式中的 Django 详细视图

如何在 Bootstrap5 模式中获取详细视图？（请不要使用jquery）。模态从链接打开（不是从按钮打开）。

django bootstrap-modal detailview

回答 1 投票 0

¿如何用css横向制作表格标题？

我有一张表来记录服务订单，在桌面视图中一切都很好，但我想确保当我将一半屏幕放在电脑上时，这个适合。为此，我想放置标题