modal-dialog 相关问题

指用于向用户显示重要信息的图形对话框。这些对话框显示在所有其他内容之上，阻止应用程序流，直到收到用户输入。

我有一个链接，当用户单击它时，将显示一个包含以下内容的模式：我有一个链接，当用户单击它时，将显示一个包含以下内容的模式： <?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 应用程序。根据您选择的选项卡（单个或多个实验），应用程序会显示单个实验的选项卡（三列）或打开带有

shiny modal-dialog rhandsontable

回答 1 投票 0

如何在 .NET Maui 中制作模态多窗口？

我正在通过 Application.Current.OpenWindow() 在 .NET Maui 打开第二个窗口，并且想知道是否有解决方案使第二个窗口成为“模态”（例如，第二个窗口必须是

modal-dialog maui winui-3 maui-blazor

回答 1 投票 0

@gorhom/bottom-sheet 模式无法在带有 apk 的 Android 上打开

我在 React Native 应用程序（带有 Expo）中使用 @gorhom/bottom-sheet 包，在按下按钮时打开底部表单模式。在 iOS 和 Android 上使用 expo start 一切正常：当我

android react-native modal-dialog apk bottom-sheet

回答 1 投票 0

如何使用上下文菜单自定义从 ag-grid 打开模态对话框

我发现代码有问题。我试图在 Angular ag-grid 中进行菜单自定义，方法是右键单击单元格，然后显示菜单自定义，例如查看详细信息、编辑数据和删除...

angular modal-dialog ag-grid custom-contextmenu

回答 1 投票 0

如何使用按钮打开登录模式？

这是我的登录模式： “使用客户端”；从“下一个/链接”导入链接；从“@/components/ui/dialog”导入{Dialog、DialogContent、DialogTrigger}；进口 { 卡片，

reactjs next.js modal-dialog tailwind-css

回答 1 投票 0

Bootstrap 3 模态窗口不显示

我正在使用 Bootstrap 3（完整版），并且在代码中使用 bootstrap 模式：我正在使用 Bootstrap 3（完整版），并且我在代码中使用 Bootstrap 模式： <a data-toggle="modal" data-target="deleteMessage" class="btn btn-danger btn-sm"><span class="glyphicon glyphicon-remove"></span> Удалить</a>  <div id="deleteMessage" class="modal fade in" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal title</h4> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> 此代码是我从官方文档复制的，但它不起作用，模式窗口不显示。有什么问题吗？尝试将锚定代码更改为： <a data-toggle="modal" data-target="#deleteMessage" class="btn btn-danger btn-sm"><span class="glyphicon glyphicon-remove"></span> Удалить</a> 教程里好像有错字，data-target属性里应该多了个“#”。您忘记将 # 包含到 data-target 属性中 <a data-toggle="modal" data-target="#deleteMessage" class="btn btn-danger btn-sm"><span class="glyphicon glyphicon-remove"></span> Удалить</a> 现场演示

html twitter-bootstrap twitter-bootstrap-3 modal-dialog

回答 2 投票 0

如何用react关闭bootstrap 5模态

我在我的项目中使用 Bootstrap 5 和 React。我没有安装它，而是使用 cdn 链接来使用 dom 中的 bootstrap 元素。我正在使用引导模式来更新数据。更新后我想...

javascript reactjs modal-dialog bootstrap-5 react-dom

回答 2 投票 0

点击reactable中的同一行后，modalDialog未打开

我目前正在构建一个闪亮的应用程序，我允许用户单击可反应中的一行并显示一个模态对话框，其中包含基于该行的更多信息。我关注了这篇文章（如何触发 modalBox ...

r shiny modal-dialog reactable

回答 3 投票 0

保持按钮禁用，直到用户到达 Angular Material 对话框中文本段落的末尾

我正在使用 Angular Material 的 MatDialog 来显示文本段落和末尾的按钮。如何保持按钮禁用，直到用户向下滚动并到达该段落的底端...

angular scroll angular-material modal-dialog

回答 2 投票 0

我的动画淡入淡出不适用于我的模态背景

我已经使用该元素制作了模态，效果很好，尽管我无法让我的背景真正淡入。我也尝试过其他动画方法，例如@keyframes，但那是d。 ..

html css modal-dialog

回答 1 投票 0

如何使表单中的弹出窗口出现在背景模糊后面？

我制作了一个警报弹出窗口，当表单中的用户输入无效时，会出现该警报弹出窗口。我将背景模糊的 z 索引设置为 10000（整个程序中最高的），但是自动弹出...

html css forms modal-dialog

回答 1 投票 0

为什么 Bootstrap 模态不渲染动态添加的内容？

我正在尝试动态地将内容添加到模态主体，但发现 html 标签未呈现，而是显示为原始文本。这就是我正在做的事情：我有 html 用户表...

modal-dialog

回答 1 投票 0

停止模态在外部单击或 ESC 时关闭

嗨，我正在尝试禁用模式中的外部点击。我尝试过使用诸如背景：'静态'，键盘：假之类的方法，但我似乎无法使其工作 html: 嗨，我正在尝试禁用模式中的外部点击。我尝试过使用诸如背景：“静态”，键盘：假之类的方法，但我似乎无法使其工作 html: <div class="container my-5"> <hr class="my-5">  <div class="modal fade" id="basicExampleModal" tabindex="-1" role="dialog" aria- labelledby="exampleModalLabel" aria-hidden="true" data-backdrop="static" data- keyboard="false"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <center><h1 class="modal-title" id="exampleModalLabel">Want more?</h1></center> </button> </div> <div class="modal-body"> <strong>Create an account or Log in to see additional search results...</strong> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Sign up</button> <button type="button" class="btn btn-primary">Log In</button> </div> </div> </div> </div> javascript: $(function() { $('#basicExampleModal').modal('show'); }); 您发布的代码中存在一些语法问题。前任。额外的 </button> 标签和 data- keyboard="false"> 中有一个空格。除了语法问题之外，它应该按预期工作，正如您从下面的示例中看到的那样。如果它仍然无法在您的端工作，则您的代码中的其他地方还有其他问题。 $('#basicExampleModal').modal('show'); <html lang="en"> <head>  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script> </head> <body> <div class="container my-5"> <hr class="my-5">  <div class="modal fade" id="basicExampleModal" tabindex="-1" role="dialog" aria- labelledby="exampleModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <center> <h1 class="modal-title" id="exampleModalLabel">Want more?</h1> </center> </div> <div class="modal-body"> <strong>Create an account or Log in to see additional search results...</strong> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Sign up</button> <button type="button" class="btn btn-primary">Log In</button> </div> </div> </div> </div> </div> </body> </html> 您可以使用“data-bs-backdrop”和“data-bs-keyboard”属性而不是 data-backdrop="static" data-keyboard="false"。 Bootstrap 5 对命名约定进行了更改，data-backdrop 和 data-keyboard 属性现在以 bs- 为前缀。使用这个： $(function() { $('modal_id').modal('show'); $('modal_id').modal({ keyboard: false, backdrop: 'static' }) }); 此脚本现在允许通过单击模式外部或按 esc 键来关闭模式。

javascript html twitter-bootstrap modal-dialog

回答 3 投票 0

材质3 DatePickerDialog容器宽度

我正在尝试更改 DatePickerDialog 容器的宽度，但是当我尝试通过modifier.width 更改宽度时，它永远无法很好地缩放。我尝试了 android 开发上的示例实现...

android datepicker modal-dialog android-jetpack-compose android-jetpack-compose-material3

回答 1 投票 0

为什么这个反应引导模式没有正确响应？

我正在开发一个使用模式对话框的react-bootstrap Web应用程序。多个模式对话框在应用程序的不同位置呈现（例如，在不同的组件、路由/开关结构、不同的

javascript reactjs modal-dialog react-bootstrap

回答 2 投票 0

modal-dialog 相关问题

最新问题