Question

我想在输入类型＆＃34; Verwijderen＆＃34;时打开一个模态。被压了。但它没有出现？我究竟做错了什么？例如，即使是W3schools的例子也不适合在Fiddle工作。我想错了什么我想但是什么？

<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吗？我认为你的错误在于你没有使用＆＃34;＃＆＃34;输入中数据目标中的ID选择器。将输入代码更改为：

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

这是一个有效的plunk。

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"/>

如何打开模态onclick？

2 个答案: