在使用引导模式时，我遇到这个错误（TypeError Cannot readproperties of undefined (reading 'backdrop') ），该错误由我们的错误跟踪器跟踪，但我无法重新创建此错误。我尝试使用各种浏览器、浏览器版本、操作系统重新创建错误。此问题并未出现在所有浏览器上。
使用的 Bootstrap 版本 - v5.2.1
我使用 JavaScript 初始化了模态
if (bootstrap == undefined) {
document.getElementById("browser-not-supported-container").classList.remove("d-none");
} else {
modal1 = new bootstrap.Modal(document.getElementById('modal1'));
modal2 = new bootstrap.Modal(document.getElementById('modal2'));
modal3 = new bootstrap.Modal(document.getElementById('modal3'));
}
这些模态的 HTML 代码
<!-- Modal 1-->
<div class="modal fade text-start" data-bs-backdrop="static" data-bs-keyboard="false" id="modal1" tabindex="-1" role="dialog">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<!-- Header -->
</div>
<div class="modal-body">
<!-- Body -->
</div>
</div>
</div>
</div>
<!-- Modal 2--> …尝试使用 JavaScript 显示 Bootstrap 5 模式时出错。
const handleClick = (e) => {
e.preventDefault();
const modalElement = document.getElementById('editUserModal');
const modal = Modal.getOrCreateInstance(modalElement);
modal.show();
};
这是模态的代码
const EditModal = () => {
return (
<>
<div
className="modal fade "
id="editUserModal"
aria-hidden="true"
tabIndex="-1"
>
<div className="modal-dialog modal-dialog-centered">
<div className="modal-content">
<div className="modal-header">
<h5 className="modal-title" id="exampleModalToggleLabel">
Modal 1
</h5>
<button
type="button"
className="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div className="modal-body">
Show a second modal and hide this one with the button below.
</div>
<div className="modal-footer">
<button
className="btn …有人可以帮助我使用 Bootstrap 5 模态页脚吗？
我想让模态页脚在左侧有一个文本（跨度或标签），在右侧有按钮
我找到了这个解决方案并尝试了它（将所有内容从“左”更改为“开始”）但不起作用。
我尝试使用d-flex justify-content-start，也尝试使用float-start，但仍然不起作用。
我正在尝试实现一个在加载学校作业页面时自动打开的模式。我正在使用 Bootstrap 5，我在网上找到的所有示例都使用旧版本。该模式可以在评论下找到Vertically Centered Cookies Modal。我使用了 Bootstrap CDN 以及https://getbootstrap.com/中的 Popper Bundle 。这是我的代码：
<!DOCTYPE HTML>
<html lang="en-AU">
<head>
<!-- Require Meta Tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CDN - Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- Title -->
<title>Title Here</title>
<!-- Webpage Icon -->
<link rel="shortcut icon" href="Images\Pilot640_Logo_Symbol.ico"/>
</head>
<body>
<!-- Nav Bar -->
<nav class="navbar navbar-expand-sm bg-secondary navbar-white">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="Images\Pilot640_Logo_Symbol.ico" alt="Logo" style="width:100px;" class="rounded-pill">
</a>
</div>
</nav> …我正在运行一个 vue3 Web 应用程序，并且在使用npm install bootstrap.
我正在运行一个工作正常的函数，但我希望在函数运行后关闭模式。下面是我的代码：
<template>
<p data-bs-toggle="modal" data-bs-target="#staticBackdrop3">
<a class="btn btn-primary my-2">Upload new property</a>
</p>
<!-- Modal for property upload -->
<div class="modal fade" id="staticBackdrop3" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Add property to the list</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form @submit.prevent="saveToDatabase">
<label> Property Name</label>
<input
type="text"
v-model="name"
required
placeholder="e.g. my house"
/>
<label>Area</label>
<select v-model="area" required>
<option value="" selected disabled="">Select an option</option>
<option …