jQuery Modal (jQuery div popup window)

Vi designere synes at kunne lide brugen af modal windows mere og mere, da de giver en hurtig måde at vise data uden at genindlæse hele siden. Det er nemt at bruge og relativt nemt at designe. Men her er hjælpen, der gør det rigtig nemt!



NyroModal v2 :: jQuery Plugin er et rigtigt godt plugins med mange mulighed for styling.

jQuery tool tip der virker!

Har endelig fundet en ordentlig jQuery-kode til at vise tooltips på alle elementer!

<script>

this.tooltip = function(){ 
 /* KONFIGURATION */ 
 xOffset = 10;
 yOffset = 20; 
 // Disse variabler bestemmer hvor langt fra cursoren popup'en vises

 $(".tooltip").hover(function(e){ 
  this.t = this.title;
  this.title = ""; 
  $("body").append("<p id='tooltip'>"+ this.t +"</p>");
  $("#tooltip")
  .css("top",(e.pageY - xOffset) + "px")
  .css("left",(e.pageX + yOffset) + "px")
  .fadeIn("fast"); 
 },
 
 function(){
  this.title = this.t; 
  $("#tooltip").remove();
 }); 
 
 $("a.tooltip").mousemove(function(e){
  $("#tooltip")
  .css("top",(e.pageY - xOffset) + "px")
  .css("left",(e.pageX + yOffset) + "px");
 }); 
}; 

// Start script "on page load"
$(document).ready(function(){
 tooltip();
});

</script>

Og CSS'en - jeg har lagt lidt runde hjørne og lidt skygge på for hyggens skyld.

#tooltip{
  display:none;
  position:absolute;
  top:120px;
  max-width:250px;

  padding:2px 5px;
  text-align:left;

  color:#fff;
  background:#333333;

  border: 2px #999 solid; 
  border-radius: 8px;
  -moz-border-radius: 8px;
  -web-border-radius: 8px;

  -moz-box-shadow: 0px 2px 10px  #333333;
  -webkit-box-shadow: 0px 2px 10px #333333;
  box-shadow: 0px 2px 10px #333333; 
} 

Herefter tilføjes class="" bare til et element, hvad enten det er

eller  og titlen kan indeholde HTML-koder!
 

<img src=".." class="tooltip" title="her er teksten.<br />Der kan bruges HTML-koder" />

Super tool tip!