Ich benutze bootstrap, weshalb mein Navbarlink ungefähr so aussieht (ist aus einem Dummy-Projekt und sieht ggf. ein wenig unfertig aus).
<a href="#my_popup" role="button" class="my_popup_open nav-link" style="line-height:1.5;" data-bs-toggle="modal" data-target="#my_popup" aria-label="searchbutton" id="search-icon" title="Suche" >
<i class="lupe">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
</svg>
</i>
</a>
Außerhalb der eigentlichen Nav habe ich noch für das Modal
<div class="modal fade " id="my_popup" tabindex="-1" role="dialog" aria-hidden="true" >
<f:render partial="Suchpartial" arguments="{_all}" />
</div>
Das Suchpartial (pageUid:' auf deine Belange anpassen). Die Übergabe des Suchbegriffs sollte mittlerweile funktionieren, vgl. notfalls https://forge.typo3.org/issues/104734
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
<div id="modal-search" class="modal-dialog" role="document" style="background-color: initial; max-width:90%;">
<div class="modal-content bg-transparent" style="margin-top:100px" >
<button type="button" class="fs-1 bg-transparent border border-0 s-close ms-auto btn-close-custom" data-bs-dismiss="modal" aria-label="Close" > </button>
<f:comment>da von hier aufgerufen, brauchts den pluginnamen - der immer noch tx_indexedsearch_pi2 ist</f:comment>
<div class="tx-indexedsearch-searchbox">
<form class="form-control bg-transparent" style="border: none;" method="post" action="{f:uri.page(pageUid:'39',additionalParams:'{tx_indexedsearch_pi2: {action:\'search\',controller:\'Search\'}}')}">
<div class="" style="pa--dding-top:100px;">
<input id="indexedsearch-sword-modal" class="d-flex justify-content-center around-input col-12 col-md-9 mx-auto fs-1 text-center fst-italic bg-transparent" style="border-top: none; border-left: none; border-right: none; border-bottom: 1px solid darkgrey" type="text" name="tx_indexedsearch_pi2[search][sword]" value="{sword}" autofocus="autofocus" placeholder="Suchbegriff">
</div>
<div class=" d-flex justify-content-center mt-5 ">
<f:form.button class="btn btn-primary btn-lg mx-auto ptx-5"
name="tx_indexedsearch_pi2[search][submitButton]" id="tx-indexedsearch-searchbox-button-submit-modal" >Suche</f:form.button>
</div>
<div class=" d-flex justify-content-center mt-5 ">
<details class="mx-auto ptx-5 d-block text-center">
<summary class="btn btn-light ">Hilfe</summary>
<p class="mx-auto ptx-5 d-block w-100">den alten hilfetext gibt's nicht mehr</p>
</details>
</div>
</form>
<f:comment>tx-indexedsearch-searchbox div ende </f:comment>
</div>
<f:comment>modal-content div ende </f:comment>
</div>
<f:comment>modal-search div ende </f:comment>
</div>
</html>
Nicht nötig, aber Besucher werden's schätzen: Mit dem JS im TS-Setup (oder f:asset.script) das Input focusieren, damit man gleich den Suchbegriff eintippen kann.
page.footerData.60 = TEXT
page.footerData.60.value(
<script>
//input in modal im suchfenster bei aufruf des modals aktivieren
//Das Modal-Ereignis abfangen
var meinModal = document.getElementById('my_popup');
meinModal.addEventListener('shown.bs.modal', function () {
// Das Eingabefeld fokusieren
var meinEingabefeld = document.getElementById('indexedsearch-sword-modal');
meinEingabefeld.focus();
});
</script>
)
Bitte entschulige die Einrückungen (irgendwie verrutscht immer was beim Einfügen). Ich hoffe, du kommst klar.
