tıklatarak tooltip ekran yapmak ve bir modal eklemek için

Question

garip, ben jquery's onclick olay işleyicisi bu keman bağlamak zor bulmak. Neyi yanlış yaptığımı bile bilmiyorum. şöyle html: -

<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>​ 

tarz bu şekilde: - Böyle bir jquery ile

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

: -

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

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

sen benim yarattığım keman sayfasını kontrol: - http://jsfiddle.net/UyZnb/339/.

Yine, araç ipucu odak haline gelmesi için jQuery modal benzeri görünümü nasıl uygularım?

Answer 1

Çalışma Demo: tetik 1, 2 ile Çalışma örnek: http://jsfiddle.net/swxzp/veya http://jsfiddle.net/rjGeS/ tıklayın kullanarak

Güncellemesi (Ben küçük JQuery/Css/Saydamlık demo yazdım): aşırı ve dışarı fareyi kullanarak & 3: http://jsfiddle.net/HeJqg/

Nasıl çalışır:

Tesiste 2 div'ler w background yani etmiştir hich, modal ve modal ve ikinci div large gibi bir araç sayfası haline getirmek için kullanılır. Bu, toolTip için bir yer tutucu görevi görür, böylece arka plan gri olsa bile istediğiniz herhangi bir zamanda kapatabilir ve açabilirsiniz.

istirahat o sebebini :)

Kod

$('.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

umut olur, kodla uğraşmak çekinmeyin çalışma demo

<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>​ 

Görüntü: Farklı mesajlarla birden ipuçları eklerim nasıl