尽管我的引导程序模式已由display: block;设置为$("#pdfModal").show();，但仍未显示。在此页面上，我已经多次使用过引导模态，也已经多次使用过。但是以某种方式并没有显示该模式，我发现这是我在一页上显示DataTables和Bootstrap模式的唯一页面。
是DataTables引起此问题吗？我不知道为什么模态不显示...（如果使用检查器，它实际上显示，但是看不到内容...）
您必须按下表格最右列的按钮才能触发模式！
你们有什么主意吗？ -不胜感激！
var table;
$(document).ready(function() {
table = $('#assignment_overview_table').DataTable({
"displayStart": 0,
"language": {
"url": "https://cdn.datatables.net/plug-ins/1.10.19/i18n/German.json"
},
"processing": true,
"pageLength": 100,
"bSortCellsTop": true,
"fixedHeader": true,
initComplete: function() {
this.api().columns().every(function() {
var column = this;
var select = $('<select><option value=""></option></select>');
select.appendTo($(column.header()).empty());
select.on('click', function(e) {
e.stopPropagation();
});
select.on('change', function() {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search(val ? '^' + val + '$' : '', true, false)
.draw();
});
column.data().unique().sort().each(function(d, j) {
select.append('<option value="' + d + '">' + d + '</option>')
});
});
$("#autofocus_on_load > select").focus();
$('th').removeAttr("tabindex");
},
});
table.on('draw', function() {
table.columns().indexes().each(function(idx) {
var select = $(table.column(idx).header()).find('select');
if (select.val() === '') {
select
.empty()
.append('<option value=""/>');
table.column(idx, {
search: 'applied'
}).data().unique().sort().each(function(d, j) {
select.append('<option value="' + d + '">' + d + '</option>');
});
}
});
});
});
$(document).on('click', '.print-pdf', function() {
console.log('Modal should show up now!');
console.log('Probably you cannot click the buttons anymore cause the modal is now above but not showing...')
$("#pdfModal").show();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js" type="text/javascript"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<link href="https://cdn.datatables.net/fixedheader/3.1.5/css/fixedHeader.bootstrap.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap.min.css">
<div class="row">
<div class="col-md-12">
<div class="portlet light portlet-fit bordered">
<div class="portlet-body">
<div id="assignment_overview_table_div" class="table-responsive">
<table class="table table-striped table-bordered" id="assignment_overview_table">
<thead>
<tr>
<th class="text-center" id="autofocus_on_load">Projekt-Nummer</th>
<th class="text-center">Zone</th>
<th class="text-center">Personen</th>
<th class="text-center">Beginn</th>
<th class="text-center">Ende</th>
<th class="text-center">Kunde</th>
<th class="text-center">Rechnungsempfänger</th>
<th class="text-center">Status</th>
<th class="text-center table-hide-select">Actions</th>
</tr>
<tr>
<th class="text-center">Projekt-Nummer</th>
<th class="text-center">Zone</th>
<th class="text-center">Personen</th>
<th class="text-center">Beginn</th>
<th class="text-center">Ende</th>
<th class="text-center">Kunde</th>
<th class="text-center">Rechnungsempfänger</th>
<th class="text-center">Status</th>
<th class="text-center">Actions</th>
</tr>
</thead>
<tbody>
<tr class="item" role="row">
<td></td>
<td></td>
<td class="text-center"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="text-center">
<button class="print-pdf btn btn-info">
<i class="glyphicon glyphicon-user"></i>
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div id="pdfModal" class="modal fade bd-example-modal-lg" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Dokument erstellen</h4>
</div>
<div class="modal-body">
<form class="form-horizontal show" role="form">
<input type="hidden" id="assignment_id_pdf">
<div class="form-group">
<label class="control-label col-sm-2" for="header_german">Header (deutsch)</label>
<div class="col-sm-10">
<textarea class="form-control toggleLocked" id="header_german" rows="10"></textarea>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="header_english">Header (englisch)</label>
<div class="col-sm-10">
<textarea class="form-control toggleLocked" id="header_english" rows="10"></textarea>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="footer_german">Footer (deutsch)</label>
<div class="col-sm-10">
<textarea class="form-control toggleLocked" id="footer_german" rows="10"></textarea>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="footer_english">Footer (englisch)</label>
<div class="col-sm-10">
<textarea class="form-control toggleLocked" id="footer_english" rows="10"></textarea>
</div>
</div>
</form>
<div class="modal-footer">
<button type="button" class="btn btn-success generate-downloadable-pdf">
<span class="fa fa-download"> </span> Download
</button>
<button type="button" class="btn btn-success generate-preview-pdf">
<span class="fa fa-file-pdf-o"> </span> Vorschau
</button>
<button type="button" class="btn btn-warning" data-dismiss="modal">
<span class="glyphicon glyphicon-remove"></span> Schlie0en
</button>
</div>
</div>
</div>
</div>
</div>
致以问候，谢谢！
答案 0 :(得分：0)
我发现自己失败了...我曾经使用过：
$("#pdfModal").show();
但是我需要使用：
$("#pdfModal").modal('show');
还是谢谢！ ：）