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上不需要#。

在这三个模态上删除#应该可以解决。

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

Bootstrap 4模态窗口无法打开

1 个答案: