Forum - Geheime Nachricht

<style>
.message_secret {
  display: inline-block;
  position: relative;
  margin: 10px 0 20px 100px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 30px;
  font-weight: bold;
  z-index: 150;
  color: #ffffff;
  padding: 30px;
  transition: margin 1s;
}
.message_secret:hover  {  
   cursor: pointer;
}
.message_secret_div {
  width: auto;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: normal;
  background: #eeeeee;
  border-radius: 3px;
  color: #000000;
  border: 1px solid #aaaaaa;
  padding: 10px;
}
.message_secret_hin {
  display: table-cell;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  padding: 2px 10px;
  background: #dddddd;
  border-radius: 5px;
}
.message_start {
  position: absolute;
  margin: 20px 0 0 20px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  box-shadow: 0.5vw 0.5vw 1vw #777777, -0.5vw -0.5vw 1vw #777777, -0.5vw 0.5vw 1vw #777777, 0.5vw -0.5vw 1vw #777777;
  overflow: hidden;
  z-index: 140;
}
.message_start_header{
  padding: 10px;
  cursor: move;
  width: 100%;
  height: 100%;
  background: #555555;
  z-index: 160;
}
</style>
 
<!-- Wenn bereits vorhanden, folgende Zeile löschen  -->
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> 
<script>
window.addEventListener('load', function(){
  // Mobil
  $('.mobileview .message_secret_hin').html('Klicken Sie den Kreis an, um die Nachricht zu enthüllen!');
  $('.mobileview .message_start_con').on('click',function(){
      $('.message_secret',this).css({'margin-left':'10px','padding':'0','font-size':'0','cursor':'default','z-index':'130'});
      $('.message_secret_div',this).css({'display':'inline-block'});
      $('.message_start, .message_secret_hin',this).hide();
  });
  // Desktop (Template (v1-v4) und Xobor(v6)
  $('.message_start_con').on('mouseup',function(){
    if ($('.message_secret:hover',this).length != 0) {
      $('.message_secret',this).css({'margin-left':'10px','padding':'0','font-size':'0','cursor':'default','z-index':'130'});
      $('.message_secret_div',this).css({'display':'inline-block'});
      $('.message_start, .message_secret_hin',this).hide();
    };
  });
 
$(".message_start").draggable();
});
</script>
 

[Geheime_Nachricht]
...
[/Geheime_Nachricht]
 

<div class="message_start_con"><div class="message_start"><div class="message_start_header"></div></div><div class="message_secret">Geheime Nachricht<div class="message_secret_div" style="display:none;"> 
...
</div></div><div class="message_secret_hin">Ziehen Sie den Kreis nach rechts und lassen die Maus los, um die Nachricht zu enthüllen!</div></div>
 

//files.homepagemodules.de/b104774/a_414_7f8895ab.png
 

Reihenfolge: 0