使用jQuery执行data-toggle

Question

我有一个按钮，可以切换Bootstrap模态框。

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">

我想用jQuery函数做同样的事情。这可能吗？

- Lord Vermillion

---

我想使用jQuery函数执行data-toggle"modal" data-target"#myModal"操作。 - Lord Vermillion

你有没有阅读Bootstrap网站的文档？如果你看过，应该注意到它可以通过JavaScript方式触发：$('#myModal').modal('show')。 - Sean

Answer 1

给你的按钮添加id并将其隐藏:

CSS:

#btnTrigger
{
display:none;
}

HTML：

<button class="btn btn-primary btn-lg" id="btnTrigger" data-toggle="modal" data-target="#myModal">

在某些其他事件或条件下，可以通过编程方式单击它：

JQuery：

$('#btnTrigger').click();

在结果中，将显示弹出窗口。

- Ehsan Sajjad

Answer 2

使用您发布的简单代码：

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">

除非你在 JavaScript 中编写代码，否则它不会显示模态对话框，例如：

$("button").on("click", function(){
  $($(this).attr("data-target")).modal("show");
});

你需要填写在"data-target"属性中的内容，这将打开一个id为dialog modal的div。

或者

$("button").on("click", function(){
  $($(this).data("target")).modal("show");
});

- Snake Eyes

---

由用户决定，不是我的选择 :) - Snake Eyes

绝对是更好的答案，因为它回答了问题而不是提供一个变通方法。哦，好吧，我觉得它非常有帮助！ - LeonH

Answer 3

以下代码能够正常运行，你可以在任何事件中调用该函数。

 <script type="text/javascript">
    $(document).ready(function () {
        ShowModel = function () {
            $("#myModal").modal();
        }
    });
</script>

- sridharnetha

---

我不知道为什么这个不是答案。 - Gaspa79

Answer 4

在你选择的任何函数中，只需简单地使用$("#myModal").modal()。

- MKZ

Answer 5

也许你应该阅读这个解释关于“data-”html5属性的。

您可以定义自定义数据属性，并在开发插件时使用它们。

这就是bootstrap所做的。

如果您想在JQuery中使用它来显示模态对话框-您应该编写一个类似于bootstrap的插件。

我建议您阅读bootstrap的源代码，看看他们如何使用此属性。

- Yaron