Question

我有一个切换自举模式的按钮。

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

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

Answer 1

使用您发布的简单代码：

<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为对话模式的div。

或

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

Answer 2

提供您的按钮ID并隐藏它：

<强> CSS：

#btnTrigger
{
display:none;
}

<强> HTML：

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

以及其他一些事件或条件只需以编程方式单击它：

<强> JQuery的：

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

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

Answer 3

下面的代码对我有用，你可以在任何事件上调用这个函数

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

Answer 4

在您选择的任何功能中只需一个简单的$("#myModal").modal()

Answer 5

也许您应该阅读有关“data-”html5属性的this explanation。

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

这就是bootstrap所做的。

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

我建议你阅读bootstrap的源代码，看看他们是如何使用这个属性的。

使用jquery执行数据切换

5 个答案: