如何在不使用按钮的情况下切换引导模式？

Posted 2023-05-08

【中文标题】如何在不使用按钮的情况下切换引导模式？

【英文标题】：How can I toggle a bootstrap modal without using a button?

【发布时间】：2021-11-16 17:19:12

【问题描述】：

效果很好，用一个按钮切换我的引导模式（模式的 id 是“exampleModal”）：

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>

如果没有这个按钮，我怎样才能只调用切换方法？我有一个烧瓶/神社 for 循环，当出现错误时会执行/渲染。我正在努力实现某些目标 像这样：

% for message in get_flashed_messages() %
    exampleModal.toggle() <-- how can I achieve this?
% endfor %

在引导 javascript API 文档中它说 $('#myModal').modal('show')，但我找不到在我的模板中调用它的正确语法。

【参考方案1】：

在 Bootstrap 5 中使用 JavaScript 完成。不再需要 jQuery。

var modalPopup = new bootstrap.Modal(document.getElementById("exampleModal"), );
modalPopup.show();

Codeply

【讨论】：

谢谢。它仍然不能完全工作。在% for message in get_flashed_messages() % 中，我将您的建议行写在函数myFunction 中，我可以通过按钮<button type="button" onclick='myFunction()'>Click Me!</button> 调用该函数，这样就可以了。但是当我将<script>myFunction()</script> 放入for 循环时，该函数永远不会被调用。这很奇怪，因为按钮有效，例如 <script>alert(123)</script> 被执行，而不是 <script>myFunction()</script>。

myFunction() 需要被调用

但是为什么<script>alert(123)</script> 工作，而<script>myFunction()</script> 什么都不做？

codeply.com/p/T875Mm6tTP 我修改了你的例子。无法让<script>myFunction()</script> 工作。

请接受它，因为它回答了您的问题 “如何在不使用按钮的情况下切换引导模式？” 当您实际调用该函数时，它再次正常工作：@987654323 @