通过JavaScript调用Bootstrap模式 [英] Calling Bootstrap modal via JavaScript

问题描述

我有这个javascript函数:

I have this javascript function:

function doDelete()
{
    if (root === null) {alert("Tree is Empty!"); return;}
    var strKey = document.getElementById('deleteKey').value;
    if (strKey=="") {alert("Please provide key"); return;}
    if (isNaN(strKey)) {alert("Key must be numeric"); return;}
    root = myBPT.Delete(root, strKey);
    myBPT.print_tree(root);
}

如何更改警报以改为调用引导程序模式?

How can I change the alert to call a bootstrap modal instead?

这是我的数据目标... #printLeaves

This is my data-target... #printLeaves

推荐答案

最简单的方法是根本不使用JavaScript来显示模式，而只是设置允许Bootstrap处理的模式和数据字段. 此处是一些示例.基本上，您需要将<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">包裹在模态中，然后使按钮看起来像这样:

The easiest way is not to use JavaScript at all to show the modal but just set the appropriate classes and data fields that allow Bootstrap to handle it. Some examples are here. Basically, you need to wrap <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> around your modal, then have the button look like:

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

如果您想通过非按钮事件来触发它，那么下面还有一个示例，但是您必须使用JavaScript.我自己没有使用单独的脚本来完成此操作(我的用例带有一个按钮)，但是文档中说您只是调用:$('#myModal').modal(options)

There's also an example further down if you want to trigger it with a non-button event, but then you do have to use JavaScript. I haven't done it using a separate script myself (my use case was with a button), but the documentation says you just call: $('#myModal').modal(options)

这篇关于通过JavaScript调用Bootstrap模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！