modal-dialog 相关问题

更新..... 我希望任何人都可以解决这个问题当我使用标签在模态弹出窗口中显示我的数据时，表格显示分散...... 当使用标签时一切正常这里... 更新..... 我希望任何人都可以解决这个问题当我使用 <td> 标签在模态弹出窗口中显示我的数据时，表格显示分散... 当使用<h5>标签时一切都OK 这是我的模态代码 <div id="myModal<?php echo $row['id']; $x = $row['id']; ?>" class="modal fade" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> </div> <div class="modal-body"> <?php $records = mysqli_query($conn,"select * from trans where id = $x "); while($row = mysqli_fetch_array($records)) { ?>  <h6>ID : <?php echo $row['id']; ?></h6> <h6>Date : <?php echo $row['date']; ?></h6> <h6>inv No : <?php echo $row['invNO']; ?></h6> <h6>income : <?php echo $row['income']; ?></h6> <?php } ?> </div> </div> </div> </div> 来自 MDN，它指出：只能在元素内使用。您遇到的情况可能是浏览器的怪癖，它会重新排列您的 HTML 输出，并将您的 <td> 元素放在您不期望的位置。要解决此问题，您应该将 <td> 元素替换为其他内容（就像您对标题标签所做的那样），或者记住将单元格包裹在 <table /> 和 <tr /> 标签内。

php modal-dialog

回答 1 投票 0

html 模态与 php 和 mySql

尝试找到解决我的问题的方法我有2张桌子... 第一个包含客户 ID 和姓名、电话、地址...等第二个表包含客户交易，例如 ID、发票...

php modal-dialog

回答 1 投票 0

如何在 Blazor PWA 应用程序中创建模式/通知弹出窗口？

我想在 Blazor 应用程序中创建模式弹出窗口或 toast 通知，我尝试实现 blazor 模式，但它给了我错误并且没有显示，我只想在按下 cer 时显示一条文本。 ..

c# notifications blazor modal-dialog popup

回答 1 投票 0

确保模式打开时页面保持不可滚动，同时仍保持滚动条可见

我试图做到这一点，以便当打开模式时，用户将无法滚动页面。但是，如果我简单地在中添加overflow:hidden，滚动条就会很快消失......

html css vue.js vuejs3 modal-dialog

回答 1 投票 0

React Modal 总是重叠

我在创建反应模式时遇到一些问题，我创建的模态总是与下一个渲染的组件重叠，模态本身是在组件上创建的，通过单击

reactjs react-redux modal-dialog

回答 1 投票 0

如何将 PHP 变量从 foreach 循环传递到循环外的 MODAL

我正在开发一个模式，它应该获取用户 ID 和用户的全名以显示在模式的标题上。这些来自 php foreach 循环。我需要获取 ID，因为我要存储...

jquery modal-dialog

回答 1 投票 0

在模态中使用 select2-autocomplete

如果我要简要解释一下我的问题；我想根据我给的参数发送Select2-Autocomplete操作到BaseController并获取相关数据。我遇到的问题...

javascript asp.net-core autocomplete modal-dialog jquery-select2

回答 1 投票 0

工作表关闭手势延迟会中断后续工作表呈现

我目前正在使用 SwiftUI 编写一个项目，列表中的每个按钮都呈现一个工作表。如果我使用“关闭”按钮关闭并选择列表中的另一个按钮，则该工作表将不显示...

ios swift swiftui modal-dialog

回答 1 投票 0

无头 UI 模式（对话框组件）单击子项时如何关闭？

如何通过单击任何子链接来关闭模式窗口？从“@headlessui/react”导入{对话框} const [modalIsOpen, setModalIsOpen] = useState(false) 如何通过单击任何子链接来关闭模式窗口？ import { Dialog } from "@headlessui/react" const [modalIsOpen, setModalIsOpen] = useState<boolean>(false) <Dialog open={modalIsOpen} onClose={() => setModalIsOpen(false)}> <div className="fixed inset-0 overflow-y-auto"> <Dialog.Panel as="div" className="absolute right-5 top-10"> <MobileLkMenu /> </Dialog.Panel> </div> </Dialog> 现在模态窗口只需在外部单击即可关闭。此外，如果将事件处理程序挂在 Dialog.Panel 上，则当单击其主体而不是链接时，模式窗口将关闭。如何关闭链接？有几种方法可以解决这个问题。举个简单的例子，您可以使用 Dialog 中 onClose 提供的 @headlessui/react 回调。但是，onClose回调应该从模态内容本身触发，而不是从Dialog.Panel触发。以下是如何修改代码来实现此目的： import { Dialog } from "@headlessui/react"; import { useState } from "react"; const ModalComponent = () => { const [modalIsOpen, setModalIsOpen] = useState<boolean>(false); return ( <Dialog open={modalIsOpen} onClose={() => setModalIsOpen(false)}> <div className="fixed inset-0 overflow-y-auto"> <Dialog.Panel as="div" className="absolute right-5 top-10"> <div> <p>Modal Content</p> <a href="#" onClick={() => setModalIsOpen(false)}>Close Modal</a> </div> </Dialog.Panel> </div> </Dialog> ); }; export default ModalComponent; 在此示例中，单击模态内容内的“关闭模态”链接将触发 onClick 事件，该事件又调用 setModalIsOpen(false)，关闭模态窗口。

reactjs user-interface next.js modal-dialog headless

回答 1 投票 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

如何处置（销毁）bootstrap 5 modal

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

javascript modal-dialog bootstrap-modal

回答 1 投票 0

如何为 Bootstrap 模态 4.0 中的按钮添加 Click 事件

我有一个简单的模态（Bootstrap 4）。我想添加一些点击功能来保存和取消按钮。我有一个简单的模态（Bootstrap 4）。我想向 click 和 save 按钮添加一些 cacel 功能。  <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"> <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" id="submit" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" id="cancel" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> 我应该如何实施？据我阅读文档（Bootstrap 的 JavaScript 模式插件），不存在按钮选项。我也尝试过： $(document).on( "click", "#submit", function() { alert("submit click"); }); 但是可以通过任何点击和任何地方调用函数（输入、模态......）。问候如果您只想向此模型中的按钮添加事件（而不是从其他位置），只需使用 id 选择器而不是文档。 $("#exampleModal").on( "click", "#submit", function() { alert("submit click"); }); $("#exampleModal").on( "click", "#cancel", function() { alert("cancel click"); });

bootstrap-4 modal-dialog

回答 1 投票 0

如何重置 Kendo 对话框中的滚动位置（jquery）

我想重新打开之前打开的剑道对话框。该对话框具有滚动内容，因此当它重新打开时我想再次位于对话框的顶部。如何？或者我需要销毁并重新...

jquery scroll kendo-ui modal-dialog

回答 1 投票 0

如何在nexjts/react中有效地重叠模态

基本上我想创建 3 个堆叠在一起的模态，如下图所示。单击“创建生态系统”将打开另一个 shadcn 对话框，如下面的第二张图所示我面临的问题...

reactjs next.js search dialog modal-dialog

回答 1 投票 0

ShinyR“hot_to_r()”函数在放置在模态中的rhandsontable中不起作用除非我进行更改

我正在开发一个 ShinyR 应用程序。根据您选择的选项卡（单个或多个实验），应用程序会显示单个实验的选项卡（三列）或打开带有