引导模式显示两次答案

【问题标题】：bootstrap modal displays twice引导模式显示两次
【发布时间】：2018-03-23 04:05:56
【问题描述】：

我有一个带有按钮的用户表，该按钮显示一个包含用户信息的模式。

所以我会有10行，每行都有自己的按钮，当我第一次按下按钮时，它会显示一个包含用户信息的模态（我们称之为模态A）并正常工作。

当我单击另一个用户的按钮时，它将显示模态 A，然后在我关闭此模态时，它会在顶部显示正确的模态（模态 B），模态 A 不再出现在屏幕上，但背景仍然可见.

我使用 laravel 5.5 和 bootstrap 3 这里是模态加载的代码。

Javascript

$(".btn").click(function(){
    var button = $(this)
    var employee_id = button.data('id')
    var url = "/something/else/" + employee_id;
    $('.modal-container').load(url,function(result){
         $('#display').modal({show:true});
    });
});

HTML

<a class="btn btn-primary" data-toggle="modal" data-id="{{ $simething->id }}" href="#display" id="modal_link">Show Modal</a>

这是完整的代码

<table id="table" class="table" cellspacing="0" width="100%" role="grid">
     <thead>
         <th>ID</th>
         <th>First Name</th>
         <th>Last Name</th>
         <th>Events</th>
     </thead>
     <tbody>
     @foreach ($empleados as $empleado)
        <tr>
            <td>{{ $simething->id }}</td>
            <td>{{ $simething->fname }}</td>
            <td>{{ $simething->lname }}</td>
            <td>
                <a class="btn btn-primary" data-toggle="modal" data-id="{{ $simething->id }}" href="#display" id="modal_link">Show Modal</a>
                <div class="modal-container"></div>
            </td>
        </tr>
     @endforeach
 </tbody>

<script>
            $(document).ready(function(){

                $(".btn").on('click', function(e){
                    var button = $(this); // Button that triggered the modal
                    var employee_id = button.data('id'); // Extract info from data-* attributes
                    var url = "/somethin/else/" + employee_id;
                    $('.modal-container').load(url,function(){
                        $('#display').modal('show');
                    });
                });
            });
        </script>

【问题讨论】：

您是否在循环中运行此 javascript 代码？请添加更多代码以更好地查看
页面上有多少类modal-container的组件？
@DioneiMiodutzki，不，我没有在循环中运行脚本，它在 $(document).ready(function(){}) 内
@Titus，我有一个组件，每个按钮都有一个 modal-container 类，所以它不止一个
在这种情况下，您应该使用 $(this).parents("tr").find('.modal-container') 之类的名称，并且类名称为 modal-container 的多个元素意味着具有相同 ID (display) 的多个元素，如果是这种情况，请使用代替类名并在与按下的按钮对应的模式上调用.modal({show:true})。

标签： javascript jquery html bootstrap-modal

【解决方案1】：

您每次都会启动模态两次，单击几下后可能会堆积起来并导致您看到的问题。尝试将您的 html 更改为不自动启动模式，如下所示：

<a class="btn btn-primary modal-btn" data-id="{{ $simething->id }}" href="#/" id="modal_link">Show Modal</a>

此外，您不应该使用“.btn”作为选择按钮的方式，因为您页面上的许多按钮都可能具有该 boostrap 类。我会给它一个唯一的类，你只想用它来定位这个模式，或者一个 ID，如果它只用于每个点击事件的一个按钮。将您的 javascript 更改为：

$(".modal-btn").click(function(){
    var button = $(this)
    var employee_id = button.data('id')
    var url = "/something/else/" + employee_id;
    $('.modal-container').load(url,function(result){
         $('#display').modal({show:true});
    });
});

【讨论】：