jQueryのQティップ - ツールチップの内部に隠れたdiv要素へのリンク
-
27-09-2019 - |
質問
私は、クリックされたショーというツールチップ(Qティップ)の内側をライトボックス(nyroModal)の内側に隠さdiv要素の内容をリンクを配置しようとしています。成功したライトボックス内のdiv開口コンテンツへのツールチップのリンクでの正規アンカータグではない。
コード: http://jsbin.com/omafe/2/する
、メモ帳にコードをコピーし、HTMLとして保存し、ファイルを開くために必要がある場合があります。 (jsbinファイルプラグインの外部jsファイルをロードしない)
任意の助けいただければ幸いです。おかげます。
解決
Qティップは、メモリ(変数)に「div.tipcontent」のコピーを格納していることが表示されます。
私はDIVから「隠された」クラスを削除することによって、これを発見しました。これを行うと、あなたは2つのdivを持っていることがわかります。まだページの一つとメモリからのQティップが使用する別の。
ソリューションとして、あなたはそれがメモリからレンダリングリンクノードに$('a').nyroModal();
を適用するQティップを変更する必要があります。
編集
次のようにQティップ初期化子を変更し、あなたのQティップリンクにライトボックスの効果を追加するには:
$('div.tooltip').qtip({
content: $('div.tipcontent').html(),
position: {
corner: {
target: 'topRight',
tooltip: 'bottomRight'
}
},
style: {
width: 150,
padding: 10,
background: 'silver',
color: 'black',
tip: 'bottomMiddle',
},
hide: {
fixed: true
},
api: {
onShow: function() { $('a').nyroModal(); }
}
});
onShowへのAPI呼び出しに注意してください。これによりQティップから動的に生成されたコンテンツをカバーし、ページ上のすべてのリンクにnyroModalを再適用します。そこQティップによって生成された特定のリンクにjQueryのセレクタを絞り込むために、より効率的な方法は、おそらくですが、これは、あなたは、少なくとも始める必要があります。