如何打开模态 onclick？

Question

我想在按下输入类型 "Verwijderen" 时打开一个模式。但是不显示？我究竟做错了什么？例如，甚至 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

您输入的是submit，所以您的页面正在提交表单，模态没有时间显示。

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

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

Answer 2

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

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

这是一个有效的 plunk。

如何打开模态 onclick？

How do I open a modal onclick?

html

javascript

jquery

modal-dialog

bootstrap-modal