Question

我一直在努力实现this question的已接受答案，但无法显示模式。

应触发模态的按钮编码如下：

<a class="btn btn-success btn-xs openModal" data-target="#myModal" data-id=1><span class="glyphicon glyphicon-edit"></span> Edit</a>

单击按钮时应触发的脚本是：

<script>
        alert("id=" + $(this).attr('data-id'));
        $('.openModal').click(function () {
            var id = $(this).attr('data-id');
            $.ajax({url: "testModal.php?id=" + id, cache: false, success: function (result) {
                    $(".modal-content").html(result);
                }});
        });
</script>

我添加了一个alert（）命令，以便判断脚本是否已执行。

当我点击应该触发它的任何按钮时，我看不到警告对话框。我出于某种原因首次加载页面时会看到警告对话框。

我已尝试将脚本放在html文件的head部分以及body部分的末尾，但在任何一种情况下都不会执行。

模态的html是

<div style="margin-top:5%;" class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content"></div>
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">Edit Venue</h4>
            </div>
            <div class="modal-body">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>

有人可以解释为什么单击按钮时脚本没有被执行？

谢谢，皮特

Answer 1

将data-toggle属性添加到锚标记以显示模态

<a class="btn btn-success btn-xs openModal" data-toggle="modal" data-target="#myModal" 
   data-id=1><span class="glyphicon glyphicon-edit"></span> Edit</a>

实际上脚本正在执行，但您将alert放在错误的位置。请尝试以下代码

<script>        
    $('.openModal').click(function () {
        alert("id=" + $(this).attr('data-id'));
        var id = $(this).attr('data-id');
        $.ajax({url: "testModal.php?id=" + id, cache: false, success: function (result) {
              $(".modal-content").html(result);
              $('#myModal').modal('show');// this is optional if adding data-toggle attribute does not work. try this. In your case, it's better to remove the data-toggle attribute and use this instead.
        }});
    });
</script>

PS：如果您在服务器端遇到错误，则可能无法显示模式。

Answer 2

您可能需要考虑使用它：

$('.openModal').on('shown.bs.modal', function () {
    // Whatever you want to do here.
})

请务必查看引导程序docs。

旁注：我自己没有尝试过代码。

Bootstrap模式未显示且jQuery脚本未执行

2 个答案: