und es erscheint da nun der Text
...
/*
*/
In meinen Codes findest du nirgends ein /* oder */. Kann also nix mit mir zu tun haben
Jetzt klickst halt auf "Show" und "Hide" 
Und INACTIVE tut nix, weil deine Vorlage in Post #6 ja nur das erste "mkclose" von mehreren "mkclose" mit Funktion haben wollte. Hab mich da brav an deine Vorlage gehalten außer dem window.onclick-Teil.
Die Get Variable "$_GET['mkbuttonfarbe'];" kommt von der xml Datei wo sich ein Field befindet was diese erzeugt. Und wird dann an die mod_mkmod.php übergeben.
Ich hatte das alles aus Tutorial mir kopiert. Ich ändere mal das mit dem <?php echo...
In meinen Codes findest du nirgends ein /* oder */. Kann also nix mit mir zu tun haben
Jetzt klickst halt auf "Show" und "Hide"
Und INACTIVE tut nix, weil deine Vorlage in Post #6 ja nur das erste "mkclose" von mehreren "mkclose" mit Funktion haben wollte. Hab mich da brav an deine Vorlage gehalten außer dem window.onclick-Teil.
Ja, das /**/ war mein Fehler, falsch auskomentiert.
Wenn ich nun auf Show klicke, passiert nichts. Bei Hide das gleiche.
Ich glaube ich mache es unnötig schwer mir zu helfen. Ich poste nochmal alle Informationen wenn es ok ist.
Hallo, ich fange nochmal von vorne an und entschuldigt bitte. 
Das hier wollte ich als Modul umsetzen:
<!DOCTYPE html>
<head>
<style>
/* Allgemeine Body Formatierung */
body {
font-family: Arial, Helvetica, sans-serif;
margin: 0px;
}
#buttonmitte {
width: 100%;
text-align: center;
z-index: 998;
}
/* IT-Security Notrufbutton */
#notrufbutton {
position: absolute;
top: 0px;
width: 170px;
border: none;
outline: none;
background-color: #ff0000;
color: #ffffff;
cursor: pointer;
margin: 0px;
padding: 2px 8px 4px 8px;
border-radius: 2px;
font-size: 14pt;
z-index: 999;
}
#notrufbutton:hover {
background-color: #772432;
}
/* Hintergrund beim erscheinen der Notrufmeldung */
.mkmodal {
display: none;
position: fixed;
z-index: 1;
padding-top: 150px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
/* Notrufmeldung Inhalt */
.mkmodal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 80%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: mkanimatetop;
animation-duration: 0.4s;
}
/* Notrufmeldung Animation */
@-webkit-keyframes mkanimatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
@keyframes mkanimatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
/* Notrufmeldung schliessen */
.mkclose {
color: #fefefe;
float: right;
font-size: 38px;
font-weight: lighter;
}
.mkclose:hover, .close:focus {
color: #ff0000;
text-decoration: none;
cursor: pointer;
}
/* Notrufmeldung Aufteilung */
.mkmodal-header {
padding: 2px 16px;
background-color: #772432;
color: #ffffff;
}
.mkmodal-body {
padding: 2px 16px;
}
.mkmodal-footer {
padding: 2px 16px;
background-color: #772432;
color: #ffffff;
}
</style>
</head>
<body>
<!-- IT-Security Notrufbutton -->
<div id='buttonmitte'>
<button id='notrufbutton'>IT-Security Notruf</button>
</div>
<!-- Die Notrufmeldung -->
<div id='notrufmeldung' class='mkmodal'>
<!-- Notrufmeldung Inhalt -->
<div class='mkmodal-content'>
<div class='mkmodal-header'>
<span class='mkclose'>×</span>
<h2>IT-Security Notruf</h2>
</div>
<div class='mkmodal-body'>
<p>Hier ein Text</p>
<p>Und hier noch mehr Text...</p>
</div>
<div class='mkmodal-footer'>
<h4>Und noch viel mehr Text</h4>
</div>
</div>
</div>
<script>
// Erhalte die Notrufmeldung
var mkmodal = document.getElementById('notrufmeldung');
// Erhalte den Button der die Notrufmeldung öffnet
var notrufbutton = document.getElementById('notrufbutton');
// Erhalte das <span> element das die Notrufmeldung schliesst
var span = document.getElementsByClassName('mkclose')[0];
// Beim aktivieren des Notrufbuttons, erscheint die Notrufmeldung
notrufbutton.onclick = function() {
mkmodal.style.display = 'block';
}
// Beim betätigen des <span> (x), schliesst die Notrufmeldung
span.onclick = function() {
mkmodal.style.display = 'none';
}
// Klickt man ausserhalb der Notrufmeldung, wird diese geschlossen
window.onclick = function(event) {
if (event.target == mkmodal) {
mkmodal.style.display = 'none';
}
}
</script>
</body>
</html>Das klappt auch alles wie es soll als HTML Datei. Die ID Bezeichnungen sind so richt. Hatte immer das Notruf hier beim posten aussen vor gelassen.
So dann hatte ich ein Tutorial gemacht zu einem Modul in Joomla mit einer "Hallo Welt" Ausgabe und dieses für mich angepasst.
Nachdem mir hier dann geholfen wurde wegen dem richtigen einbinden der CSS Datei, konnte ich über das Backend den Text auf den Notrufbutton ändern.
Doch ich würde gerne auch das man die Farbe vom Button ändern kann über das Backend.
Ich poste jetzt alle Quellcodes von meinem Modul.
helper.php:
<?php
/**
* Helper class for IT-Security Notruf Modul
*
* @package Joomla.Tutorials
* @subpackage Modules
* @link http://docs.joomla.org/J3.x:Creating_a_simple_module/Developing_a_Basic_Module
* @license GNU/GPL, see LICENSE.php
* mod_helloworld is free software. This version may have been modified pursuant
* to the GNU General Public License, and as distributed it includes or
* is derivative of works licensed under the GNU General Public License or
* other free or open source software licenses.
*/
?>mod_qnotruf.php:
<?php
/**
* IT-Security Notruf Modul (Controller Datei)
*
* @package Joomla.Tutorials
* @subpackage Modules
* @license GNU/GPL, see LICENSE.php
* @link http://docs.joomla.org/J3.x:Creating_a_simple_module/Developing_a_Basic_Module
* mod_helloworld is free software. This version may have been modified pursuant
* to the GNU General Public License, and as distributed it includes or
* is derivative of works licensed under the GNU General Public License or
* other free or open source software licenses.
*/
// No direct access
defined('_JEXEC') or die;
// Include the syndicate functions only once
require_once dirname(__FILE__) . '/helper.php';
// Notrufbutton Ueberschrift
$mkbuttontext = $params->get('mkbuttontext');
// Notrufbutton Farbe
$mkbuttonfarbe = $params->get('mkbuttonfarbe');
require JModuleHelper::getLayoutPath('mod_qnotruf');
JHtml::_('stylesheet', 'mod_qnotruf/mk_style.css.php', array('version' => 'auto', 'relative' => true));
JHtml::_('script', 'mod_qnotruf/mk_js.js', array('version' => 'auto', 'relative' => true));
?>mod_qnotruf.xml:
<?xml version="1.0" encoding="utf-8"?>
<extension type="module" version="3.8.12" client="site" method="upgrade">
<name>IT-Security Notruf</name>
<author>Ich</author>
<version>1.0.0</version>
<description>IT-Security Notruf Modul</description>
<files>
<filename module="mod_qnotruf">mod_qnotruf.php</filename>
<filename>mod_qnotruf.xml</filename>
<filename>index.html</filename>
<filename>helper.php</filename>
<folder>tmpl</folder>
</files>
<media folder="media" destination="mod_qnotruf">
<folder>css</folder>
<folder>js</folder>
</media>
<config>
<fields name="params">
<fieldset name="EINSTELLUNGEN" label="Einstellungen">
<field name="mkbuttontext" type="text" default="" label="Text vom Notrufbutton" description="Der Text der auf dem IT-Security Notfallbutton erscheinen soll." filter="string" />
<field name="mkbuttonfarbe" type="color" default="" label="Hintergrundfarbe vom Notrufbutton" description="Die Farbe vom IT-Security Notfallbutton." />
</fieldset>
</fields>
</config>
</extension>default.php:
<?php
// No direct access
defined('_JEXEC') or die; ?>
<!-- IT-Security Notrufbutton -->
<div id='buttonmitte'>
<button style='background-color: <?php=$mkbuttonfarbebg?>;' id='notrufbutton'><?php echo $mkbuttontext; ?></button>
</div>
<!-- Die Notrufmeldung -->
<div id='notrufmeldung' class='mkmodal'>
<!-- Notrufmeldung Inhalt -->
<div class='mkmodal-content'>
div class='mkmodal-header'>
<span class='mkclose'>×</span>
<h2>IT-Security Notruf</h2>
</div>
<div class='mkmodal-body'>
<p>Hier ein Text</p>
<p>Und hier noch mehr Text...</p>
</div>
<div class='mkmodal-footer'>
<h4>Und noch viel mehr Text</h4>
</div>
</div>
</div>mk_style.css.php:
<?php
header('Content-type: text/css');
$mkbuttonfarbebg=$_GET['mkbuttonfarbe'];
?>
/* Allgemeine Body Formatierung */
body {
font-family: Arial, Helvetica, sans-serif;
margin: 0px;
}
#buttonmitte {
width: 100%;
text-align: center;
z-index: 998;
}
/* IT-Security Notrufbutton */
#notrufbutton {
position: absolute;
top: 0px;
width: 170px;
border: none;
outline: none;
background-color: <?=$mkbuttonfarbebg?>;
color: #ffffff;
cursor: pointer;
margin: 0px;
padding: 2px 8px 4px 8px;
border-radius: 2px;
font-size: 14pt;
z-index: 999;
}
#notrufbutton:hover {
background-color: #772432;
}
/* Hintergrund beim erscheinen der Notrufmeldung */
.mkmodal {
display: none;
position: fixed;
z-index: 1;
padding-top: 150px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
/* Notrufmeldung Inhalt */
.mkmodal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 80%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: mkanimatetop;
animation-duration: 0.4s;
}
/* Notrufmeldung Animation */
@-webkit-keyframes mkanimatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
@keyframes mkanimatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
/* Notrufmeldung schliessen */
.mkclose {
color: #fefefe;
float: right;
font-size: 38px;
font-weight: lighter;
}
.mkclose:hover, .close:focus {
color: #ff0000;
text-decoration: none;
cursor: pointer;
}
/* Notrufmeldung Aufteilung */
.mkmodal-header {
padding: 2px 16px;
background-color: #772432;
color: #ffffff;
}
.mkmodal-body {
padding: 2px 16px;
}
.mkmodal-footer {
padding: 2px 16px;
background-color: #772432;
color: #ffffff;
}mk.js:
// Erhalte die Notrufmeldung
var mkmodal = document.getElementById('notrufmeldung');
// Erhalte den Button der die Notrufmeldung oeffnet
var notrufbutton = document.getElementById('notrufbutton');
// Erhalte das <span> element das die Notrufmeldung schliesst
var span = document.getElementsByClassName('mkclose')[0];
// Beim aktivieren des Notrufbuttons, erscheint die Notrufmeldung
notrufbutton.onclick = function() {
mkmodal.style.display = 'block';
}
// Beim betaetigen des <span> (x), schliesst die Notrufmeldung
span.onclick = function() {
mkmodal.style.display = 'none';
}
// Klickt man ausserhalb der Notrufmeldung, wird diese geschlossen
window.onclick = function(event) {
if (event.target == mkmodal) {
mkmodal.style.display = 'none';
}
}So das sind die Dateien ohne das mit dem <?php echo... bearbeitet zu haben.
Das Modul selber habe ich in die Template Position von der Hauptnavigation gesteckt.
Problem in dieser Version ist. Das JS wird nicht ausgeführt. Und die Buttonfarbe in der css.php Datei wird nicht übernommen.
Na ja, dann nimm halt erst mal den ganzen störenden Kram aus der CSS raus. Diese ganzen position: ...; animationen, z-index,
Na ja, dann nimm halt erst mal den ganzen störenden Kram aus der CSS raus. Diese ganzen position: ...; animationen, z-index,
Alles klar, mache ich mal. Danke dir.
Update: Mein JS Code ist Mist. Morgen werde ich den von Re:Later anpassen. Der ist besser.
Hi,
bin gerade dabei und muss aber feststellen, das wenn ich das Modul in der Position "nav" vom Template platziere. Beim Klick meine "Notrufmeldung" nicht erscheint. PLatziere ich das Modul in z.B. der Postion "footer1" vom Template, dann erscheint die Notrufmeldung beim Klick.
Ist es möglich, dass das was beim Klick passieren soll, über die komplette Webseite zu "legen"? Ohne dafür das Template anzupassen. Und wenn das doch nur durch das anpassen vom Template geht, kann man das Template durch das Modul anpassen? Ohne selbst den Quellcode vom Template manuell anzufassen.
Ich bedanke mich schonmal für die viele Geduld.
Kleines Update meines "Kampfes" mit dem Modul. xD
Nun hat es geklappt das ich im Backend bei dem Field vom Typ color, Hintergrundfarben von vers. Divs verändern kann. Das ganze geht aber nicht über die externe CSS Datei. Da klappte es ja einfach nicht das die Variable übernommen wird.
Also werde ich wohl vieles von dem CSS wieder direkt in die Default reinschreiben.
Damit bin ich erstmal beschäftigt.
Ich lese hier mit aber verstehe kein Wort Vielleichthabe ich nciht gründlich genug gelesen.
Ich verstehe:
Du hast ein Modul, das einen Notrufbutton zeigt. Du willst Farbe und Text des Buttons zunächst per Parameter festlegen?
Falls ja: Das geht alles ganz "automagisch" wenn du die Parameter im .xml file deines Moduls setzt.
Dann hast du zwei Parameter: Buttonfarbe und buttontext.
Zitat<button style='background-color: <?php=$mkbuttonfarbebg?>;' id='mkbutton'><?php echo $mkbuttontext; ?></button>
Es müsste heissen
<button style="background-color: <?php echo $mkbuttonfarbebg; ?>;" id="mkbutton"><?php echo $mkbuttontext; ?></button>Nun verstehe ich es so, dass du Farbe und Text deines Buttons nach dem Klick ändern willst.
Dazu hast du ein js file, in dem du auf das Anklicken des Buttons reagierst, ungefähr sowas:
jQuery('#mkbutton').removeClass("red").addClass("green");
Das js file hast du eingebunden? Oder du lässt jedesmal nach einer Änderung einen minifier drüberlaufen und bindest die .min.js ein?
Am einfachsten wäre es, wenn du dein ganzes Modul in ein .zip file wirfst und es hier postest.
Das macht nichts,wenn du die Begriffe nicht kennst, wir haben alle mal angefangen, aber es ist für Helfer immer leichter, wenn sie den ganzen Code vor sich haben statt nur Schnippsel. Re:Later ist auch ein geduldiger Helfer für Programmierer Newbies und hat dich schon ganz schön voran gebracht.
js ist jetzt nicht grad mein Spezialgebiet, aber das hover würde ich in dem Fall was mit jQuery machen: Farbe verändern bei onmousover und onmouseout.
Füge mal das hier im mod_qnotruf.php ein:
$document = JFactory::getDocument();
// load some css
$document->addStyleDeclaration('
#notrufbutton' . '{'.
'background-color: ' . $mkbuttonfarbe .';'.
'}
#notrufbutton:hover' . '{'.
'background-color: ' . $mkbuttonfarbehover .';'.
'}
');Jetzt kannst du die Inline-Formatierungen im default.php wieder löschen:
<button id='notrufbutton'><?php echo $mkbuttontext; ?></button>Da ich im Backend Menü vom Modul viele Einstellmöglichkeiten zur Verfügung stelle, wäre es gut ein wenig mehr Ordnung rein zu bringen. Kann man Überschriften zwischen den einzelnen Fields bringen? So das eine Gliederung möglich ist.
Beispiel: