如何打开模态onclick？

Question

我想按下输入类型“Verwijderen”时打开一个模态。 但它没有出现？ 我究竟做错了什么？ 例如，即使是W3schools的例子也不适用于小提琴。 我想错了什么我想但是什么？

<td colspan="2">
<input type="submit" style="width:140px;" value="Opslaan"/>
<input
    type="submit"
    style="width:140px;"
    id="cancelForm"
    class="ketchUp-default"
    value="Annuleren"/>
<input
    type="submit"
    id="deleteEvent"
    value="Verwijderen"
    style="width:140px;"
    class="ketchUp-default"
    data-toggle="modal"
    data-target="confirm-delete"/>

<div
    class="modal fade"
    id="confirm-delete"
    tabindex="-1"
    role="dialog"
    aria-labelledby="myModalLabel"
    aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">

            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">Confirm Delete</h4>
            </div>

            <div class="modal-body">
                <p>You are about to delete one track, this procedure is irreversible.</p>
                <p>Do you want to proceed?</p>
                <p class="debug-url"></p>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-danger btn-ok">Delete</button>
            </div>
        </div>
    </div>
</div>

Answer 1

你在使用BootStrap 3吗？ 我认为您的错误是您没有在输入的数据目标中使用“＃”ID选择器。 将输入代码更改为：

<input
    type="submit"
    id="deleteEvent"
    value="Verwijderen"
    style="width:140px;"
    class="ketchUp-default"
    data-toggle="modal"
    data-target="#confirm-delete"/>

这是一个工作的插件 。

Answer 2

您的输入是submit ，因此您的页面正在提交表单，并且模式没有时间显示。

尝试将submit按钮转换为简单button （不提交），并显示您的模态。

<input
    type="button"
    id="deleteEvent"
    value="Verwijderen"
    style="width:140px;"
    class="ketchUp-default"
    data-toggle="modal"
    data-target="confirm-delete"/>