如何在按钮单击时隐藏 Bootstrap 5 模态

Question

我有一个Bootstrap 5 模态，用于通过单击按钮下载文件。这工作正常，但我希望在单击下载按钮后隐藏模式，这就是我挣扎的地方。

我正在尝试使用 jQuery 来执行此操作。我知道 jQuery 库已成功导入并且我的函数正在执行，因为我可以在同一函数中显示一个警告框，但我无法隐藏模态。

完整的代码片段粘贴在下方，脚本部分位于底部。我试图用来关闭模态的关键代码行是：-

$('#downloadConfirm1').modal({show : false});

我也试过以下方法：-

$('.modal.in').modal('hide');

但都没有用。我非常感谢任何花时间阅读我的 post 的人。欢迎任何建议！

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <title>Java Documentum Services</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js" integrity="sha512-OvBgP9A2JBgiRad/mM36mkzXSXaJE9BEIENnVEmeZdITvwT09xnxLtT4twkCa8m/loMbPHsvPl0T8lRGVBwjlQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css" integrity="sha512-GQGU0fMMi238uA+a/bdWJfpUGKUkBdgfFdgBm72SUQ6BeyWjoY/ton0tEjH+OSH9iP4Dfh+7HM0I9f5eR0L/4w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    </head>
    <body>
    <div class="container">
        <a class="btn btn-sm btn-outline-primary" data-bs-toggle="modal"
           data-bs-target="#downloadConfirm1"
           role="button">Download
        </a>
    
        <div class="modal fade" id="downloadConfirm1" tabindex="-1" aria-labelledby="downloadConfirm1"
             aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="downloadModalLabel">Confirm download</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"
                                aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <p>Download Docx_test_file.docx?</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <a href="files/dummy.pdf" download="dummy.pdf">
                            <button type="button" id="download_button1">Download</button>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </body>
    
    <script>
    $('#download_button1').click(function() {
        alert("Hello! I am an alert box!!");
        $('#downloadConfirm1').modal({show : false});
    });
    </script>
    
    </html>

Answer 1

Bootstrap 5 模态下降 jQuery 所以这就是为什么你不能用 jQuery 隐藏模态。您应该在初始化时保存模态实例。

之后您可以使用此代码隐藏您的模式。

参考：Bootstrap 5 Modal#hide

var modalInstance = new bootstrap.Modal(document.getElementById('downloadConfirm1'));

var modal = document.getElementById('downloadConfirm1'); 
modalInstance.hide(modal);

如何在按钮单击时隐藏 Bootstrap 5 模态

How to hide Bootstrap 5 modal on button click

html

javascript

jquery

bootstrap-modal

bootstrap-5