尽管 $("#pdfModal").show(); 将其设置为 display: block;，但我的 Bootstrap 模态以某种方式未显示。我已经多次使用 bootstrap modals 并且已经在这个页面上使用了多次。但不知何故，这个模式没有出现，我发现这是我在一页上显示 DataTables 和 Bootstrap Modals 的唯一页面..
是我的数据表导致了这个问题吗？我不知道为什么模态没有出现...(如果您使用检查器它实际上会出现但您看不到内容...)
您必须按下表格中最右侧列的按钮才能触发模式!
你们有什么想法吗？ - 将不胜感激!
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>亲切的问候和谢谢!
最佳答案
我发现我的失败......我用过:
$("#pdfModal").show();
但我需要使用:
$("#pdfModal").modal('show');
还是谢谢! :)
关于javascript - 尽管设置为显示 block ，但 Bootstrap 模态未显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51715066/