<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
        width: 550px;
	margin:25;
	padding:30;
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
	color: black;
	font-size: 15px;
	line-height: 20px;
	height: 100%;
	background-color: white;
}
.alert {
    width: 250px;
    height: 250px;
    left:100px;
    margin: 50px;
    padding: 10px;
    background-color: #f44336;
    color: white;
    opacity: 1;
    transition: opacity 0.6s;
    margin-bottom: 15px;
}

.alert.gruen {background-color: #4CAF50;}

.closebtn {
    margin-left: 15px;
    color: white;
    font-weight: bold;
    float: right;
    font-size: 22px;
    line-height: 20px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
}

.closebtn:hover {
    color: black;
    border: 3px solid darkgreen;
}
href { 
	onload:topFunction();
}
href { 
	document.body.scrollTop = 0;
}
href { 
	document.documentElement.scrollTop = 0;
}

</style>
<script>
*/script für internes Meldungsfenster*/
function show(id) {
	if(document.getElementById) 
	{
	var mydiv = document.getElementById(id); 
	mydiv.style.display = (mydiv.style.display=='block'?'none':'block');
	}
}
*/script für externes Meldungsfenster*/
function FensterOeffnen (Adresse) {
  fenster1 = window.open(Adresse, "fenster1", "width=400, height=500, top=10, left=50, scrollbars=yes, 'status=0', 'toolbar=0', 'location=0', 'menubar=0', 'dependent=yes'");
  fenster1.focus();
}
</script>
</head>
<body>

<h2>Alert Messages</h2>
Es gibt hier zwei Buttons, nämlich Meldung in einem kleinen Extrafenster (Pop-up) 
und Einblendung direkt unterhalb mit einem Button zum Schließen der Box.
In der Praxis wählt man einen von beiden.
 <br /><br />
    
Irgendein Text: Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 

<br /><br />
Duis aute irure dolor in reprehenderit in voluptate velit esse molestaie cillum. Tia non ob ea soluad incommod quae egen ium improb fugiend. Officia deserunt mollit anim id est laborum Et harumd dereud facilis est er expedit distinct. Nam liber te conscient to factor tum poen legum odioque civiuda et tam. Neque pecun modut est neque nonor et imper ned libidig met, consectetur adipiscing elit, sed ut labore et dolore magna aliquam is nostrud exercitation ullam mmodo consequet. 
<div>
    <a href="" target="_top" onclick="javascript:show('anfordern');return false"><button>Text hier &#9662; einblenden</button></a>
    <a href="meldung.htm#top"  onclick="FensterOeffnen(this.href); return false;" title="Meldung:......"><button>Text im Fenster &#9776;</button></a>
    <div style="display: none" id="anfordern">
    <div class="alert gruen">
	<a href="" class="closebtn"><button>&times;</button></a>  
  	<h3>ACHTUNG!</h3> 
    
    Hier steht der Inhalt der Meldung:
	<br /> <br /> 
        Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut       metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. 
    </div>
    </div>
</div>

<script>
var close = document.getElementsByClassName("closebtn");
var i;

for (i = 0; i < close.length; i++) {
    close[i].onclick = function(){
        var div = this.parentElement;
        div.style.opacity = "0";
        setTimeout(function(){ div.style.display = "none"; }, 600);
    }
}
</script>
Noch mehr Text: Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen. Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht – ein geradezu unorthographisches Leben. Eines Tages aber beschloß eine kleine Zeile Blindtext, ihr Name war Lorem Ipsum, hinaus zu gehen in die weite Grammatik. Der große Oxmox riet ihr davon ab, da es dort wimmele von bösen Kommata, wilden Fragezeichen und hinterhältigen Semikoli, doch das Blindtextchen ließ sich nicht beirren. Es packte seine sieben Versalien, schob sich sein Initial in den Gürtel und machte sich auf den Weg. Als es die ersten Hügel des Kursivgebirges erklommen hatte, warf es einen letzten Blick zurück auf die Skyline seiner Heimatstadt Buchstabhausen, die Headline von Alphabetdorf und die Subline seiner eigenen Straße, der Zeilengasse. Wehmütig lief ihm eine rhetorische Frage über die Wange, dann setzte es seinen Weg fort. Unterwegs traf es eine Copy. Die Copy warnte das Blindtextchen, da, wo sie herkäme wäre sie 
<br />
<br />

</body>
</html>

<-- Meldungsdatei meldung.htm -->

<html lang="de">
<title>Meldung</title>
<head>
  	<meta charset="utf-8">
  	<meta name="viewport" content="width=device-width; initial-scale=1.0;" />
<style>
body {
	margin:5;
	padding:10;
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
	color: black;
	font-size: 15px;
	line-height: 24px;
	height: 100%;
	background-color: lightgreen;
}
</style>
<script> 
<!-- irgendwas -->
</script>
<!-- <script language="JavaScript" src="check.js" type="text/javascript"> </script> -->
</head>
<body">
<base target="_self">
<div>
<h3>Anmerkung:</h3>
<br />Irgendein Text:
<br /><br />
Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. 
Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. 
Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur 
ullamcorper ultricies nisi. 
</div>

</body>
</html>