Modals Back-Layer ist oben auf Modal und wird nicht über das Schließen gehen Button

Question

Modals Back-Layer ist oben auf Modal und wird nicht über den Schließen-Button gehen und hält den Bildschirm, um etwas weiter in der Tabelle, deren Zeilen sind tippen generiert von js und so das modale selbst.

$("#load_list tbody").append("<tr><td style='width:45%;'>"+response[i].name+"</td><td><input type='number' id='"+response[i].id+"' class='form-control'></td><td><button type='button' class='btn btn-info btn-sm' data-toggle='modal' data-target='#"+response[i].name+"'>SMP</button><div class='modal fade' id='"+response[i].name+"' role='dialog' aria-hidden='true'><div class='modal-dialog'><div class='modal-content'><div class='modal-header'><h4 class='modal-title'>SMP for "+response[i].name+"</h4></div><div class='modal-body'><p>"+response[i].smp+"</p></div><div class='modal-footer'><button type='button' class='btn btn-default' data-dismiss='modal' aria-hidden='true'>Close</button></div></div></div></div></td></tr>"); 

Answer 1

function appendTo() { 
 
    $("#load_list tbody").append("<tr><td style='width:45%;'>Shalin Patel</td><td><input type='number' id='Shalin Patel' class='form-control'></td><td><button type='button' class='btn btn-info btn-sm' data-toggle='modal' data-target='#shalin_patel'>SMP</button><div class='modal fade' id='shalin_patel' role='dialog' aria-hidden='true'><div class='modal-dialog'><div class='modal-content'><div class='modal-header'><h4 class='modal-title'>SMP for Shalin Patel</h4></div><div class='modal-body'><p>Some Data Here</p></div><div class='modal-footer'><button type='button' class='btn btn-default' data-dismiss='modal' aria-hidden='true'>Close</button></div></div></div></div></td></tr>"); 
 

 
}

<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 

 
<!-- jQuery library --> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 

 
<!-- Latest compiled JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<button onclick="appendTo()">Click me</button> 
 

 
<table id="load_list"> 
 
    <tbody> 
 

 
    </tbody> 
 
</table>

Above Lösung für Sie arbeiten unten angegebenen Code ist aber ein bisschen generic ein.

var response = [{ 
 
    id: 1, 
 
    name: 'Shalin Patel', 
 
    smp: 'Smp for Shalin Patel is .....' 
 
}, { 
 
    id: 2, 
 
    name: 'Patel Shalin', 
 
    smp: 'Smp for Patel Shalin is .....' 
 
},{ 
 
    id: 3, 
 
    name: 'Unknown Person', 
 
    smp: 'Smp for Unknown Person is .....' 
 
}] 
 

 

 
$("#smp_for_id").on('show.bs.modal', function(e) { 
 
    var invoker = $(e.relatedTarget); 
 
    var id = invoker.data('id'); 
 
    $("#smp_for_id .modal-title").empty().append('SMP for ' + response[id].name); 
 
    $("#smp_for_id .modal-body p").empty().append(response[id].smp); 
 
}); 
 

 
function appendTo() { 
 

 
    for (i = 0; i < response.length; i++) { 
 
    var msg = ''; 
 
    msg += '<tr>'; 
 
    msg += ' <td style="width:45%;">' + response[i].name + '</td>'; 
 
    msg += ' <td><input type="number" id="your_id" class="form-control"></td>'; 
 
    msg += ' <td><button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#smp_for_id" data-id="' + i + '">SMP</button></td>'; 
 
    msg += '</tr>'; 
 

 
    $("#load_list tbody").append(msg); 
 
    } 
 

 
}

<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 

 
<!-- jQuery library --> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 

 
<!-- Latest compiled JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<button class="btn" onclick="appendTo()">Click me</button> 
 

 
<table id="load_list"> 
 
    <tbody> 
 

 
    </tbody> 
 
</table> 
 

 
<div class='modal fade' id='smp_for_id' role='dialog' aria-hidden='true'> 
 
    <div class='modal-dialog'> 
 
    <div class='modal-content'> 
 
     <div class='modal-header'> 
 
     <h4 class='modal-title'>SMP for Shalin Patel</h4> 
 
     </div> 
 
     <div class='modal-body'> 
 
     <p>Some Data Here</p> 
 
     </div> 
 
     <div class='modal-footer'> 
 
     <button type='button' class='btn btn-default' data-dismiss='modal' aria-hidden='true'>Close</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

2. Schnipsel zeigt Ihnen, wie Sie es dynamisch tun, so dass Sie nicht brauchen, um modal an den Tisch mit verschiedenen ID für jede Zeile anhängen, sondern einen einzigen modalen für alle Zeilen Das reduziert den Code beim Debuggen und macht es gut. Beachten Sie, dass Sie diese Daten möglicherweise in einer Variablen speichern müssen, wenn Sie sie weiter verwenden möchten, wie ich gezeigt habe.