如何从JQuery中的模态对话框中获取结果
从 jQuery 模态对话框中获取结果的方法是使用 Bootstrap 模态插件的事件和方法。以下是一个简单的示例：
- 首先，确保已经在项目中包含了 jQuery、Bootstrap 和 Bootstrap 模态插件的依赖文件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Modal Example</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
</head>
<body>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" 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="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<input type="text" id="inputText" class="form-control">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="saveButton">Save changes</button>
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Open Modal
</button>
<script>
// 监听模态框的隐藏事件
$('#exampleModal').on('hidden.bs.modal', function () {
// 获取输入框的值
var inputTextValue = $('#inputText').val();
// 在此处处理结果
console.log('Input Text Value:', inputTextValue);
});
// 监听保存按钮的点击事件
$('#saveButton').on('click', function () {
// 获取输入框的值
var inputTextValue = $('#inputText').val();
// 在此处处理结果
console.log('Input Text Value:', inputTextValue);
// 关闭模态框
$('#exampleModal').modal('hide');
});
</script>
</body>
</html>在这个示例中，我们创建了一个包含输入框的模态框。当用户点击“保存更改”按钮时，我们可以获取输入框的值并在控制台中打印出来。此外，当模态框关闭时，我们也可以获取输入框的值并处理结果。
请注意，这个示例使用了 Bootstrap 5，如果您使用的是其他版本，请根据实际情况调整代码。
相关·内容
2回答
我想为我的组件设计一个动态模态对话框。我从输入中获取宽度和高度，并将这些设置为我的内容div。也许我在一页中有几个模态对话框。如何使用java脚本和jQuery实现它？
浏览 4提问于2013-12-26得票数 0
回答已采纳
1回答
我想使用和dojo创建一个模态对话框向导。
我使用嵌入式模式搜索将流嵌入到对话框中。但我发现很少有与此相关的例子。在这些示例中，他们使用JSF对话框和tiles框架部分呈现表单。有人能帮助我使用spring创建一个嵌入在dojo对话框中的向导吗？
浏览 2提问于2015-04-23得票数 0
回答已采纳
我试图添加一个按钮到活动网格丝带，以打开一个模态窗口显示所有的活动与最近的数据在地图上。有没有一种使用POST而不是GET将SelectedControlSelectedItemIds传递给web资源的方法？*<CommandDefinition Id="Ms
浏览 4提问于2012-01-05得票数 1
回答已采纳
如何识别在jQuery中打开的对话框是模态的还是非模态的？我正在处理一个应用程序，在这个应用程序中，我只需要在模态对话框上采取行动，而不是在非模态对话框上。
浏览 6提问于2015-02-20得票数 0
回答已采纳
2回答
下面是我正在做的序列和代码：
this.model.tabledata.push(new_record)；
this.render(
浏览 4提问于2015-07-10得票数 1
1回答
“搜索”按钮在第一次单击时工作，但一旦关闭，则通过单击X(关闭按钮)或运行搜索(在搜索后设置为“关闭”)，它不会打开，因此控制台中也没有错误，因此我无法确定错误所在以及如何修复。ignoreCase:true,closeAfterSearch:true,closeOnEscape:true,showQuery:true});
我不认为这是一个错误，因为我已经看到许多演示演示它应该如何工作，我猜我有一个错误的配置，请查看我的代码，并帮助确定问题。需要记住的一件事是，我通过一个ajax调用获得数据来加载网格，
浏览 1提问于2015-10-28得票数 1
回答已采纳
每个参与者都可能有一个或多个可用于参与活动的代码。在此之后，用户必须填写他们的个人资料，以便他们可以联系，以防止他们赢得比赛。
如何添加一个打开模式窗口的[+]按钮，询问我需要多少代码字段？我成功地创建了一个add更多的按钮，它只添加了一个按钮，但是对于客户需求，我们需要使用一个弹出窗口来询问我们需要多少个字段。
浏览 0提问于2015-01-20得票数 2
谁能告诉我如何在asp.net、MVC和AJAX中使用jQuery模式弹出窗口。我已经尝试过JQModal和JQuery UI，但还没有找到任何好的示例或教程。
浏览 0提问于2009-10-04得票数 0
回答已采纳
在单击“查看术语”时，将打开一个模式对话框。我想在模态对话框中验证文本。我面临的问题是如何从主窗口切换到模态对话框。我尝试了driver.getWindowHandles()，但是dowsn不起作用。请建议我如何将焦点切换到对话框并获取它的文本。
浏览 6提问于2016-04-17得票数 0
回答已采纳
我正在使用角引导$modal和我有问题，了解如何共享数据之间的控制器和模态。modalController resolve: $scope.repository模态$scope.repository = other_repo 在这一点上，我期望$scope.repository
浏览 3提问于2014-07-30得票数 0
回答已采纳
4回答
根据我的编程条件，我有太多的警觉消息，我想美化它们，因为它们看起来正常和奇怪。blah blah');</script>";{}
我尝试了太多的jquery插件，但是它们可以处理一些特定的事件，比如onclcik，onblur，onhover，onload，
浏览 1提问于2012-06-07得票数 1
回答已采纳
1回答
我使用了一些由Ryan Fait ()编写的自定义表单元素。正常使用时，一切运行正常。但是，当从模式jQuery对话框容器中使用时，文档事件似乎不会被激发-模式对话框似乎阻止了它们的传播。它在非模式的jQuery对话框中工作得很好。那么，有谁知道如何使用模态jQuery对话框</em
浏览 1提问于2012-01-26得票数 2
我正试图在我的AngularJS应用程序中创建非模态对话框。我正在尝试创建一个可拖动的对话框，它保持活动，而其余的背景可以交互(非模态定义)。这个库：关于如何用最小的依赖关系实现这一点，有什么指示吗？编辑(2014年8月20日)：I最终为非<em
浏览 4提问于2014-08-04得票数 1
2回答
我正在使用jQuery创建一个模态对话框。代码通过bokmarklet将jQuery插入站点，并运行创建的脚本。问题是，一些站点内容似乎总是通过灰色模式窥视，甚至在Chrome或Firefox中。底部的灰色部分是模态。徽标是从。
浏览 6提问于2011-08-20得票数 0
回答已采纳
我想在两个组件之间传递数据，但我的问题是：在我的主目录中，我想打开模态对话框，并在不离开主组件的情况下从我的模态对话框中获取数据。我知道如何使用@Input，但我在我的应用程序中找不到使用它的方法
例如，在我的main.html<em
浏览 6提问于2017-09-14得票数 3
回答已采纳
我从QDialog打开QMainWindow窗口。现在，当我按下QDialog窗口时，它并不总是在第一个按下时关闭--我需要按几次(3-4)才能关闭它。我是这样从主窗口调用QDialog的：{ {第二个问题是，如何将QDialog窗口设置为不缓解顶部的问题？)我不想让它挡住父窗口。更新
嗯，我发现MainWindow中显示contex
浏览 1提问于2011-08-07得票数 0
我使用的是JQuery v2.1.1和JQuery UI v1.11.0，我试图在另一个对话框中打开一个模态对话框，禁用第一个(父)对话框。 $("#dialog-second").dialog("o
浏览 3提问于2014-08-03得票数 1
回答已采纳
下面的代码在一个JQgrid对话框中使用JqueryUI。当第一次按下“查找记录”按钮时，过滤器表单在网格前显示得很好。关上过滤器，好的。打开过滤器，很好，把它关上。但是在第三次按“查找记录”按钮后，过滤器表单就出现在对话框的后面。对于原因/解决方案有什么想法吗？--使过滤器表单总是出现在网格和对话框的前面？谢谢..。
<!/ui/1.9.1/themes/base/jquery-ui.css"
浏览 2提问于2013-04-03得票数 1
我正在使用剃须刀视图和jQuery。我想将剃刀视图中的值写入模态对话框的标题中。(视图在引导模式对话框中打开)$(".modal-title").text("this is just for test");
一切都很好，文本在模态
浏览 4提问于2017-02-17得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
腾讯会议
云直播
对象存储活动推荐
腾讯云开发者
