Bootstrap 4 模态窗口未打开

Question

我正在尝试使用 Bootstrap 4 打开一个模式。我在控制台或 HTML 本身中没有看到任何错误，但模式没有显示。

这是部分代码：

<tr>
    <th scope="row">1</th>
    <td>Casper Group</td>
    <td>700eabd7-b830-4f26-a940-d5f131c68d7f</td>
    <td>2018-08-18 09:16:01</td>
    <td class="text-right">
        <div class="btn-group" role="group">
            <a href="#" class="btn btn-secondary">Edit</a>
            <button type="button" data-toggle="modal" data-target="#confirmDeleteModal-1" class="btn btn-danger">Delete</button>
        </div>
        <!-- Modal for delete confirmation -->
        <div class="modal fade" id="#confirmDeleteModal-1" tabindex="-1" role="dialog" aria-labelledby="confirmDeleteModalLabel-1" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="confirmDeleteModalLabel-1">Confirm delete</h5>
                    </div>
                    <div class="modal-body">
                        Are you sure you want to delete the details of "Casper Group"?
                    </div>
                    <div class="modal-footer">
                        <form method="POST" action="#">
                            <input type="hidden" name="_token" value="k7hGv6Bddupv0KBOY2m8xkmro6lpfZeAgqcwT1MC">                                                        <input type="hidden" name="_method" value="DELETE">                                                     <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                            <input type="submit" value="Delete" class="btn btn-danger">
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </td>
</tr>

我创建了一个fiddle，也许你们中的一个人有一个想法。

Answer 1

data-target 上需要 #，因为那是 jQuery 选择器，但模态元素 ID 上不需要 #。

删除这 3 个模式上的 # 应该可以修复它。

<div class="modal fade" id="confirmDeleteModal-1" ... >