Hi zusammen!
Hier ein Weg, wie man die Fehlermeldungen in Contao 3 Formularen "modal" anzeigen kann.
Vorteil: Durch die Fehlermeldungen "fliegt" das Form-Layout nicht mehr auseinander.
JQuery wird benötigt bzw. muss aktiviert sein.
1. JQuery Plugin von hier downloaden:
https://github.com/ericmmartin/simplemodal/downloads
2. Das Plugin entpacken (z.B. nach "assets/jquery/simplemodal/jquery.simplemodal.1.4.3.min.js")
3. Template /system/modules/core/templates/form.html5 nach /templates kopieren und
4. so erweitern (ganz unten im Template vor dem letzen "</div"> einfügen):
PHP-Code:
<?php if ($this->hasError): ?>
<?php /* Modal Fehlermeldungen */ ?>
<div id="formerror"></div>
<script src="assets/jquery/simplemodal/jquery.simplemodal.1.4.3.min.js"></script>
<script>
jQuery(document).ready(function($){
// alle p.error "verschieben" in modal div
$('p.error').appendTo('#formerror');
$("#formerror").modal();
});
</script>
<?php endif; ?>
<?php /* end Modal Fehlermeldungen */ ?>
5. noch ein wenig CSS ergänzen, z.B.:
Code:
#formerror{display:none;}
#simplemodal-overlay {background-color:#000; cursor:wait;}
#simplemodal-container {height:auto !important; width:40% !important; color:#c00; background-color:#FDE777; border:4px solid #444; padding:12px;font-size:1em;}
#simplemodal-container a.modalCloseImg {background:url("x.png") no-repeat; width:25px; height:29px; display:inline; z-index:3200; position:absolute; top:-15px; right:-16px; cursor:pointer;}
#simplemodal-container #basic-modal-content {padding:8px;}
label.error{color:#c00;}
5.a) die Grafik "x.png"
aus dem CSS oben muss man noch erstellen und in diesem Falle ins selbe Verzeichnis kopieren, in dem die CSS-Datei liegt.
Das wars schon.
Beste Grüße : Joc
Lesezeichen