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>
Alles anzeigen
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.
*/
?>
Alles anzeigen
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));
?>
Alles anzeigen
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>
Alles anzeigen
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>
Alles anzeigen
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;
}
Alles anzeigen
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';
}
}
Alles anzeigen
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.
