visualizza il tooltip al clic e aggiungi un modale

Question

stranamente, trovo difficile associare il gestore di eventi onclick di jquery a questo violino. Non so nemmeno cosa sto sbagliando. Il codice HTML è la seguente: -

<ul> 
    <li><a id="tooltip_1" href="#" class="tooltip" >Trigger1</a><li> 
    <li><a id="tooltip_2" href="#" class="tooltip" >Trigger2</a><li> 
    <li><a id="tooltip_3" href="#" class="tooltip" >Trigger3</a><li> 
</ul> 

<div style="display: none;"> 
    <div id="data_tooltip_1"> 
     data_tooltip_1: You can hover over and interacte with me 
    </div> 
    <div id="data_tooltip_2"> 
     data_tooltip_2: You can hover over and interacte with me 
    </div> 
    <div id="data_tooltip_3"> 
     data_tooltip_3: You can hover over and interacte with me 
    </div> 
</div>​ 

stile in questo modo: -

li { 
    padding: 20px 0px 0px 20px; 
}​ 

con jQuery in questo modo: -

$(document).ready(function() { 
    $('.tooltip[id^="tooltip_"]').each 

     (function(){ 
     $(this).qtip({ 
      content: $('#data_' + $(this).attr('id')), 
       show: { 
      }, 
      hide: { 
       fixed: true, 
       delay: 180 
      } 
     }); 
    }); 
});​ 

di controllare la pagina di violino che ho creato: - http://jsfiddle.net/UyZnb/339/.

Ancora, come si implementa un aspetto simile a un jquery modale in modo che il suggerimento diventi lo stato attivo?

Answer 1

lavoro Demo: usando il mouse sopra e fuori: http://jsfiddle.net/swxzp/o usando clicca http://jsfiddle.net/rjGeS/ (ho scritto una piccola demo JQuery/Css/Opacity)

Aggiornamento: campione Lavorare con trigger 1, 2 & 3: http://jsfiddle.net/HeJqg/

Come funziona:

Dispone di 2 div cioè background w che viene utilizzato per rendere la pagina di riposo diventa grigia come modale e secondo div large che fungerà da segnaposto per il toolTip in modo che sia possibile chiuderlo e aprirlo in qualsiasi evento si desideri anche se lo sfondo è grigio.

Resto sentirsi liberi di giocare con il codice, spero che aiuta la causa :)

Codice

$('.tooltip_display').click(function() { 
    var $this = $(this); 
    $("#background").css({ 
     "opacity": "0.3" 
    }).fadeIn("slow"); 


    $("#large").html(function() { 
     $('.ttip').css({ 
      left: $this.position() + '20px', 
      top: $this.position() + '50px' 
     }).show(500) 

    }).fadeIn("slow"); 


}); 

$('.note').on('click', function() { 
    $('.ttip').hide(500); 
    $("#background").fadeOut("slow"); 
    $("#large").fadeOut("slow"); 

}); 
$("#large").click(function() { 
    $(this).fadeOut(); 

});​ 

CSS

.ttip { 
    position: absolute; 
    width: 350px; 
    height: 100px; 
    color: #fff; 
    padding: 20px; 
    -webkit-box-shadow: 0 1px 2px #303030; 
    -moz-box-shadow: 0 1px 2px #303030; 
    box-shadow: 0 1px 2px #303030; 
    border-radius: 8px 8px 8px 8px; 
    -moz-border-radius: 8px 8px 8px 8px; 
    -webkit-border-radius: 8px 8px 8px 8px; 
    -o-border-radius: 8px 8px 8px 8px; 
    background-image:-moz-linear-gradient(top, #F45000, #FF8000); 
    background-image: -webkit-gradient(linear, left top, left bottom, from(#F45000), to(#FF8000)); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F45000', endColorstr='#FF8000', GradientType=0); 
    background-color:#000; 
    display: none 
} 
.contents { 
    font-size: 15px; 
    font-weight:bold 
} 
.note { 
    font-size: 13px; 
    text-align:center; 
    display:block; 
    width: 100% 
} 
#background{ 
    display: none; 
    position: absolute; 
    height: 100%; 
    width: 100%; 
    top: 0; 
    left: 0; 
    background: #000000; 
    z-index: 1; 
} 
#large { 
    display: none; 
    position: absolute; 
    background: #FFFFFF; 
    padding: 0px; 
    z-index: 10; 
    min-height: 0px; 
    min-width: 0px; 
    color: #336699; 
}​ 

HTML

<span class="tooltip_display">Trigger</span> 
<div id="large"> 
<div class="ttip"> 
    <div class="contents">Here goes contents...</div> 
    <span class="note">(click here to close the box)</span> 
</div> 
</div> 
<div id="background"></div>​ 

Immagine di demo funzionante: