首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何从JQuery中的模态对话框中获取结果

从 jQuery 模态对话框中获取结果的方法是使用 Bootstrap 模态插件的事件和方法。以下是一个简单的示例:

  1. 首先,确保已经在项目中包含了 jQuery、Bootstrap 和 Bootstrap 模态插件的依赖文件。
代码语言:html
复制
<!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,如果您使用的是其他版本,请根据实际情况调整代码。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

6分1秒

77_尚硅谷_大数据SpringMVC_从ServletContext中获取SpringIOC容器对象的方式.avi

9分9秒

164_尚硅谷_实时电商项目_从MySQL中获取偏移量的工具类封装

6分9秒

Elastic 5分钟教程:使用EQL获取威胁情报并搜索攻击行为

6分6秒

普通人如何理解递归算法

2分44秒

Elastic-5分钟教程:通过策展,推广或隐藏你的搜索结果

25分31秒

每日互动CTO谈数据中台(上):从要求、方法论到应用实践

3.2K
2分43秒

ELSER 与 Q&A 模型配合使用的快速演示

2分3秒

小白教程:如何在Photoshop中制作真实的水波纹效果?

1分19秒

020-MyBatis教程-动态代理使用例子

14分15秒

021-MyBatis教程-parameterType使用

3分49秒

022-MyBatis教程-传参-一个简单类型

7分8秒

023-MyBatis教程-MyBatis是封装的jdbc操作

领券