尽管设置为显示块，但引导模态未显示

Question

Somehow my bootstrap modal is not showing up although it gets set to display: block; by $("#pdfModal").show(); . I have used bootstrap modals already several times and also already multiple times on this page. But somehow this modal is not showing up and I figured out this is the only page where I am showing DataTables and Bootstrap Modals on one page..

Is DataTables my causing this problem? I have no idea why the modal is not showing up... (It actually show up if you use the inspector but you cannot see the content...)

You have to press the button on the most right column in the table to trigger the modal!

You guys have any ideas? - Would appreciate it!

 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> 

Kind regards and Thank You!

Answer 1

I found my failure... I have used:

$("#pdfModal").show();

But I need to use:

$("#pdfModal").modal('show');

Thanks anyway! :)