machen Tooltip-Anzeige auf klicken und fügen Sie ein modales

Question

seltsamerweise finde ich es schwierig, jquery Onclick Event-Handler zu dieser Geige zu binden. Ich weiß nicht einmal, was ich falsch mache. Die HTML ist wie folgt: -

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

gestylt auf diese Weise: -

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

mit jquery wie folgt aus: -

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

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

Sie die Geige Seite an I erstellt: - http://jsfiddle.net/UyZnb/339/.

Wie implementiere ich eine jquery modal-ähnliche Darstellung, damit der Tooltip zum Fokus wird?

Answer 1

Working Demo: mit der Maus über die und aus: http://jsfiddle.net/swxzp/oderhttp://jsfiddle.net/rjGeS/ mit klicken (Ich habe eine kleine JQuery/css/Opazität Demo geschrieben)

Update: Arbeitsprobe mit Trigger 1, 2 3 &: http://jsfiddle.net/HeJqg/

Wie es funktioniert:

es hat 2 divs dh background w hich wird verwendet, um die Restseite zu einem grau-ish wie modal und zweiten div large zu machen, das als Platzhalter für den ToolTip dient, so dass Sie ihn jederzeit schließen und öffnen können, auch wenn der Hintergrund grau ist.

Ruhe fühlen sich frei, mit dem Code zu spielen, um, hoffen, dass es die Ursache :)

-Code

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

hilft

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

Bild Arbeits Demo: