bootstrap-modal 相关问题

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

我有一个带有的反应引导模式。我想在上设置自动对焦属性以下工作正常，但在控制台中显示警告我有一个带有 react-bootstrap 的 <input> 模态。我想在 <input> 上设置自动对焦属性以下工作正常，但在控制台中显示警告 <input type="text" autofocus='true' /> Warning: Invalid DOM property `autofocus`. Did you mean `autoFocus`? 以下选项不起作用，因为它们在打开模式时不会聚焦输入： <input type="text" autoFocus='true' /> <input type="text" autoFocus={true} /> <input type="text" autoFocus /> 建议的自动对焦设置方式是什么？或者我应该如何使效果良好的示例的警告静音？注意：这是react 16.8.6 如果您使用 React Hooks，请将 useCallback() 添加到您的组件，并将 ref={callback} 添加到表单控件： import React, { useCallback } from 'react' function InputComponent() { const autoFocus = useCallback(el => el ? el.focus() : null, []) return <input type="text" ref={autoFocus} /> } export default InputComponent 您也可以将 <input> 替换为 React Bootstrap FormControl。 Refs就是你想要的， constructor(props) { super(props); this.myRef = React.createRef(); } componentDidMount(){ this.myRef.current.focus(); } <input type="text" ref={this.myRef} /> 如果您正在使用反应钩子，您可以编写自己的简单自动聚焦钩子： import { useEffect, useState } from "react"; export const useAutoFocus = (inputId: string) => { const [initialized, setInitialized] = useState(false); useEffect(() => { if(!initialized) { document.getElementById("email").focus(); setInitialized(true); } }); }; 并且简单地使用例如 useAutoFocus("email") 以您的形式。为什么我开始输入时会出现错误？但如果没有自动对焦或其替代方案，我的代码就可以了。

javascript reactjs bootstrap-modal react-bootstrap autofocus

回答 4 投票 0

我可以在没有 Bootstrap 的情况下制作 Modal 吗？

我的任务是创建一个模式，但我被告知在此版本中我无法使用 Bootstrap 库。是否可以在没有 Bootstrap 类的情况下构建模式？如果是的话可以

twitter-bootstrap bootstrap-modal

回答 3 投票 0

如何从带有id的链接打开模态框？

我有一个链接，当用户单击它时，将显示一个包含以下内容的模式：我有一个链接，当用户单击它时，将显示一个包含以下内容的模式： <?php include ('dbcontroller.php'); if(isset($_GET['view_id'])) { $id=$_GET['view_id']; $sql = mysqli_query($conn, "SELECT * from press where id='$id'"); $row = mysqli_fetch_array($sql); ?> <input type="hidden" value="<?php echo $row['id']; ?>" /> <?php echo $row['reason']; ?> <a href="index.php" class="btn btn-primary">GO BACK</a> <?php } $conn->close(); ?> 上面的代码是我所做的，这样当用户单击链接时，它会将他重定向到该页面。但我希望它位于模式对话框中，因为它的内容不多。这是用户点击的链接。我如何在模式对话框中打开此链接？ <a href="viewReason.php?view_id=<?php echo $row['id'];?>">Click to view </a> 我在这个网站和其他地方看到过一些，但它们只有一个没有 ID 的链接来查看模式对话框。我没有找到与我相同的问题，所以我决定寻求帮助。嘿，您可以使用以下代码来获取行值 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> </head> <body> <div class="container">  <br><br><br><br> <table id="prab" border="1"> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> <td><button type="submit" class="btn btn-default" data-toggle="modal" data-target="#myModal" value="Jackson"><span class="glyphicon glyphicon-envelope"></span>Invite</button></td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>50</td> <td><button type="submit" class="btn btn-default" data-toggle="modal" data-target="#myModal" value="smith" ><span class="glyphicon glyphicon-envelope"></span>Invite</button></td> </tr> </table>  <div class="modal fade" id="myModal" role="dialog"> <div class="modal-dialog">  <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Modal Header</h4> </div> <div class="modal-body"> <p>clicked value </p> <input type="text" id="valueof" > </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div> <script type="text/javascript"> $('#prab').click(function(e){ // alert($(e.target).val()); document.getElementById("valueof").value = $(e.target).val(); }) </script> </body> </html>

php modal-dialog href bootstrap-modal

回答 1 投票 0

如何使用 JavaScript 关闭一个模态框并打开另一个模态框（具有相同的 ID）？

我打开了一个模态窗口（包含分页列表），并且在该模态中我有下一个/上一个按钮，应该显示新内容。我无法在第一个 m 中包含模态框 next 和 prev 的 HTML 代码...

javascript twitter-bootstrap bootstrap-modal

回答 1 投票 0

Bootstrap：关闭模态并通过 javascript 打开另一个模态（具有相同的 id）

javascript twitter-bootstrap bootstrap-modal

回答 1 投票 0

bootstrap 5 使用 vanilla javascript 关闭模式

您好，请按照此处的教程进行操作 https://getbootstrap.com/docs/5.0/components/modal/#via-javascript 他们使用按钮来切换显示模式。如果你想在 Bootstrap 5 中用

javascript bootstrap-modal bootstrap-5

回答 6 投票 0

无法获取模式来显示口袋妖怪的类型和图像

HTML： ...

javascript html bootstrap-4 bootstrap-modal

回答 1 投票 0

商店功能向我显示错误路线[admin.store]未通过模式为商店数据定义，无法知道为什么我正确完成了路线

提交添加新用户的数据时'(???)'显示路线未定义，我使用模式提交数据，期望在按提交后保存新用户的数据和路线，我看到没有...

javascript php laravel bootstrap-modal

回答 1 投票 0

Modal 打开后立即关闭 c#

我想使用模式（通过单击按钮）将数据插入表中（在另一个控制器中调用操作）这是我的cshtml代码： ... 我想使用模式（通过单击按钮）将数据插入表中（在另一个控制器中调用操作）这是我的cshtml代码： <section class="basic-elements"> <div class="row"> <div class="col-md-12"> <div class="card"> <div class="card-body"> <div class="px-3"> <form class="form"> <div class="form-body"> <div class="row"> <div class="col-xl-4 col-lg-6 col-md-12 mb-1"> <fieldset class="form-group"> <label for="roundText">Clinic Name</label> @Html.DropDownListFor(m => m.clinics, new SelectList(Model.clinics, "Id", "Name"), new { @class = "form-control round" }) </fieldset> <fieldset class="form-group"> <button class="btn btn-success btn-round dropdown-toggle mr-1" id="btnAddClinic" onclick="ShowModalAddClinic()">add new clinic</button> </fieldset> </div> </div> <button class="btn btn-success btn-round dropdown-toggle mr-1" id="btnAddClinic" data-toggle="dropdown">insert</button> </div> </div> </form> </div> </div> </div> </div> 这是我的模态代码： @section Scripts { <link href="~/SweetAlert2/sweetalert2.min.css" rel="stylesheet" /> <script src="~/SweetAlert2/sweetalert2.min.js"></script> <script> function ShowModalAddClinic() { $('#AddClinic').modal('show'); } </script> } @section Modals { <div class="modal fade" id="AddClinic" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLongTitle">ایجاد کلینیک</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <div class="col-xl-12 col-lg-12 col-md-12 mb-1"> <fieldset class="form-group"> <label for="basicInput">Clinic Name</label> <input type="text" class="form-control round" id="ClinicName"> </fieldset> </div> </div> <div class="modal-footer"> <a class="btn btn-secondary" data-dismiss="modal">close</a> <a class="btn btn-primary" onclick="AddNewClinic()">add</a> </div> </div> </div> </div> } 但是当我点击“添加新诊所”时，模式显示并立即消失。如果您能帮助我解决这个问题，我将不胜感激。谢谢你我找到了答案：原因是使用“表单标签”。我删除了“表单标签”，现在可以使用了。

c# asp.net-mvc bootstrap-modal

回答 1 投票 0

如何处置（销毁）bootstrap 5 modal

我在项目中使用bootstrap 5。我正在构建一个当您单击按钮时打开的测验。该测验显示在 Bootstrap 5 模态组件内。我的问题是，当您单击关闭按钮时...

javascript modal-dialog bootstrap-modal

回答 1 投票 0

打开 Bootstrap 5 模式会将标题和背景移至右侧

我使用 Angular 2 和 Bootstrap 5 作为前端。打开模态框时，标题和背景会向右移动，覆盖滚动条。经过检查，我发现HTML代码发生了变化...

html css angular bootstrap-modal bootstrap-5

回答 2 投票 0

如何在单击输入时打开 Bootstrap 模式？

我正在使用 Bootstrap，我有一个搜索表单和一个模式。我希望当我单击搜索表单时打开我的模型。我在网上找到的模态仅适用于按钮，但我不...