Ich habe mein Portal komplett auf Bootstrap 5.3 eingerichtet.
Alles klappt super nur eie Sache eben noch nicht.
Situation:
Es soll immer möglich sein ein Modal-Fenster einer bestimmten Seite zu öffnen.
Hier meine Skripte.
Typoscript:
lib.modalContent = CONTENT
lib.modalContent {
table = tt_content
select {
pidInList = 29
}
110 = FLUIDTEMPLATE
110 {
template = EXT:dms/Resources/Private/Partials/Modal.html
variables {
modalContent < lib.modalContent
}
}
}
Ich will also, dass die Page 29 geöffnet wird.
Die Html-Site:
<div class="modal fade" id="dmsModal" tabindex="-1" role="dialog" aria-labelledby="dmsModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="dmsModalLabel">{title}</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<f:cObject typoscriptObjectPath="lib.modalContent" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">X</button>
</div>
</div>
</div>
</div>
Im Body wird auf das Typoscript verwiesen.
Tja, der Button: den habe ich als Html-Script wie folgt eingebunden:
<button type="button" class="btn btn-secondary" id="openModalButton" data-target="#dmsModal">
Modal öffnen
</button>
Das auslösende Event, Javascript:
/*Modal start*/
document.getElementById('openModalButton').addEventListener('click', function() {
$('#dmsModal').modal('show');
});
/*Modal end*/
Leider ruft der Button zwar das Event, aber nicht das Modal.
Bin ich auf dem Holzweg?
Wo habe ich mich verlaufen?
Ich hoffe das Ganze ist verständlich.