引導模式顯示兩次

Question

我有一個帶按鈕的用戶表，該按鈕顯示包含有關用戶信息的模式。

因此，我將有10行，每行都有其自己的按鈕，當我第一次按下按鈕時，它將顯示一個包含用戶信息的模式（我們將其稱為模式A）並正常工作。

當我單擊另一個用戶的按鈕時，它將顯示模式A，然后在頂部，當我關閉該模式時，它將顯示正確的模式（模式B），模式A不再顯示在屏幕上，但背景仍然可見。

我正在使用帶有引導程序3的laravel 5.5，這是模態加載的代碼。

Java腳本

$(".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});
    });
});