通过普通函数而不是 jQuery 对象方法调用打开 Bootstrap 模式

Question

我可以在 jQuery 对象上通过方法打开 Bootstrap 的 modal dialogs：

$('#myModal').modal(options)

但是在我的代码中，我已经将模态 div 的普通 DOM Element 检索为

var myModal = document.querySelector("#myModal")

但是这个 Element 对象没有 Bootstrap 的 modal 方法。有没有办法使用这个 Element 对象和 not 来调用 jQuery 选择器？那么是否可以将 Bootstrap 的 modal 代码作为普通的函数以元素作为参数来调用？我在想

modal(myModal, options)

非常感谢任何指点！

Answer 1

没有办法做类似 modal(myModal, options) 的事情，因为 Bootstrap（像所有插件一样）扩展了 jQuery 函数原型。

当Bootstrap的JavaScript第一次运行时，它使用类似于$.fn.modal的代码扩展jQuery的原型函数，然后Bootstrap分配该新 jQuery 函数的模态功能。

现在，如果您已经将模态元素分配给 JavaScript 变量，则可以将该变量用作 jQuery 选择器并显示、切换或隐藏或任何您想要的操作想。我不知道这样做是否有任何好处，但这是可能的。

在下面的演示中，我使用 JavaScript 在页面加载时打开模式：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="myModalLabel">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

<script>
    const myModalElement = document.getElementById('myModal');

    $(myModalElement).modal('show');

    /* $('#myModal').modal('show'); */
</script>

通过普通函数而不是 jQuery 对象方法调用打开 Bootstrap 模式

Open a Bootstrap modal via a plain function not a jQuery object method call

javascript

jquery

twitter-bootstrap

bootstrap-modal

bootstrap-4