Question

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

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

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

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

的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>

Answer 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});
    });
});

bootstrap模态显示两次

1 个答案: