Forum - Super Color-Picker nach oben öffnen! - 2

<style>
#icon_help_div {cursor:pointer; }
#icon_help {display: none; position: absolute; background-color: #ffffff;color:#383838;max-width: 6000px; max-height:400px; padding:10px;border: 5px double #222222; border-radius:5px; left: 0;  right:0; margin:auto; z-index: 999999; line-height:20px !important;text-align:left; overflow: auto;}
#icon_help ul {font-size:12px;margin-left:10px;cursor:default;}
#icon_help li {float:none;}
#icon_help h5 {color:#901000; margin:0px;}
#icon_help_close {display: none;font-size: 12px;margin-right: 7px;color:#901000;}
</style>
 
 
<div id="icon_help_div" class="xob_icon_cont"><img class="xob_icon xob_icon_on"  src="//files.homepagemodules.de/b2001010/a_248.png">
<div id="icon_help">
<div style="float: right;"><span><b>x</b></span></div>
 
<h5>Wie funktioniert die Farbauswahl?</h5>
<ul>
<li>Texte können mit den unterschiedlichsten Farben dargestellt werde!<br></li>
<li><b>Zuerst</b> wird der Text markiert, der eingefärbt werden soll!</li>
<li>Die Textfarbe kann durch Anklicken der oberen Standardfarben verändert werden!</li>
<li>Soll der Text mit einer besonderen Farbe versehen werden,  wird das mit einem Klick in die große Farbauswahl durchgeführt!</li>
<li>Im rechten Farbfeld kann die aktuelle Farbe eingesehen werden!</li>
<li>Die zuletzt genutzte Farbe wird im unteren Farbfeld gespeichert und kann durch ein Mausklick erneut verwendet werden!</li>
<li>Zusätzlich wird im unteren Feld zur Farbe der Farbcode angezeigt!</li>
</ul>
 
<br>
 
<h5>Wie funktioniert die Auswahl mit den Leuchtfarben "Glow"?</h5>
<ul>
<li>Texte können mit leuchtenden Farben dargestellt werde!</li>
<li><b>Zuerst</b> wird auch hier der Text markiert, der eingefärbt werden soll!</li>
<li>Die Glow-Textfarbe kann durch Anklicken der Glow-Farben verändert werden!</li>
<li>Zur Zeit stehen sieben unterschiedliche Leucht-Farben zur Verfügung!</li>
</ul>
 
</div>
</div>
 
<script>
window.addEventListener('load', function(){
 
$('#icon_help_div img').on('click',function(){
$(this).next().toggle();
});
 
$('#icon_help span').on('click',function(){
$('#icon_help').css('display','none');
});
 
});
</script>
 

<style>
#icon_help {display: none; position:absolute; max-width: 500px; left:0; margin:55px; font-size:16px; background-color: #ffffff; color:#000000; padding:10px 35px 10px 10px; border:5px double #000000; border-radius:5px; z-index:99999; text-align:left;font-weight:bold;line-height:20px;}
#icon_help_scroll {max-height:220px; overflow: auto;text-align:left;}
#icon_help ul {line-height:20px;font-size:13px;display: none;margin-left:20px;}
#icon_help li {float:none;}
#icon_help h5:hover {color:#001090;cursor:pointer;}
#icon_help h5 {margin-right:10px;font-size:13px;white-space: nowrap;color:#901000;}
#icon_help_close_div {float:right;margin:-5px -25px 10px 0;font-weight:bold;cursor:pointer;}
</style>
 
<div id="icon_help_div" class="xob_icon_cont"><img class="xob_icon xob_icon_on" src="//files.homepagemodules.de/b2001010/a_248.png">
<div id="icon_help"><img src="//files.homepagemodules.de/b2001010/a_248.png"> <u>Hilfe Colorpicker</u>
<div id="icon_help_close_div">X</div>
<div style="clear:both;"></div>
 
<div id="icon_help_scroll">
 
<h5>Wie funktioniert die Farbauswahl?</h5>
<ul>
<li>Texte k&#246;nnen mit den unterschiedlichsten Farben dargestellt werde!</li>
<li><b>Zuerst</b> wird der Text markiert, der eingef&#228;rbt werden soll!</li>
<li>Die Textfarbe kann durch Anklicken der oberen Standardfarben ver&#228;ndert werden!</li>
<li>Soll der Text mit einer besonderen Farbe versehen werden,  wird das mit einem Klick in die gro&#223;e Farbauswahl durchgef&#252;hrt!</li>
<li>Im rechten Farbfeld kann die aktuelle Farbe eingesehen werden!</li>
<li>Die zuletzt genutzte Farbe wird im unteren Farbfeld gespeichert und kann durch ein Mausklick erneut verwendet werden!</li>
<li>Zus&#228;tzlich wird im unteren Feld zur Farbe der Farbcode angezeigt!</li>
</ul>
 
<div style="clear:both;"></div>
 
<h5>Wie funktionieren die Leuchtfarben "Glow"?</h5>
<ul><li>Texte k&#246;nnen mit leuchtenden Farben dargestellt werde!</li>
<li><b>Zuerst</b> wird auch hier der Text markiert, der eingef&#228;rbt werden soll!</li>
<li>Die Glow-Textfarbe kann durch Anklicken der Glow-Farben ver&#228;ndert werden!</li>
<li>Zur Zeit stehen sieben unterschiedliche Leucht-Farben zur Verf&#252;gung!</li>
</ul>
 
</div>
</div>
</div>
 
<script>
window.addEventListener('load', function(){
 
$('#icon_help_div img, #icon_help h5').on('click',function(){
$(this).next().toggle();
});
 
$('#icon_help_close_div').on('click',function(){
$('#icon_help').hide();
});
 
});
</script>