Twitter'da rollover'da dinamik olarak pop-up değeri ayarlandı Bootstrap 3.0

Question

Twitter Bootstrap 3.0 kullanarak bir popo gösterisini iframe yapmalıyım, popopver ise iframe'leri href'in devasa olayı kullanarak sağlanan değerlere dayanarak göstermelidir.

İlk bağlantı çalışıyor ancak 3.0 değil, 2.0.2'de var, ancak ikinci bağlantının değişkenin değerini değiştirmesi ve farklı bir iframe göstermesi gerekiyor ve nasıl yapılacağını bilmiyorum. o.

$(window).load(function(){ 
var img = '<iframe frameborder="0" scrolling="no" height="220" width="420" 
        src="http://dxlite.g7vjr.org/?dx=LU5DX&limit=10"></iframe>'; 
$("#blob").popover({title: 'Last 10 spots for the selected station', content: img}); 
}) 

<a href="#" id="blob" class="btn large primary" rel="popover" style="margin-top: 
100px">hover for popover</a> 

<a href="#" id="blob" class="btn large primary" rel="popover" onmouseover=""var img = 
'<iframe frameborder="0" scrolling="no" height="220" width="420" 
src="http://google.com"></iframe>';"" style="margin-top: 100px">hover for popover</a> 

Answer 1

Aşırı derecede karmaşık olduğunuzu düşünüyorum. Yinelenen kimliğe sahip

• # 1, lütfen sözdizimi hataları
• benzersiz kimlik atayın gerekir. Konsola bakın.
• Vurguluda bs poposunu göstermeniz gerekiyorsa, hedefi yalnızca bs popover ayarlarında veya bir data niteliğinde ayarlamanız gerekir.
• iframe öğesini iframe olarak değil, iframe öğesinin html metin temsilcisini bağlam olarak göstermeniz gerekir, böylece data-trigger = "hover" veya ayarlarında ayarlamalısınız. Performans nedeniyle

, Tooltip ve Popover veri apis şunlardır: Sen popover inialte veya yapıcı ve nedenini arayarak popover nesneyi dönüştürmek gerekir

aşağıda belgede belirtilmiştir dahil etmek isterseniz. Bunları kullanmak isterseniz sadece bir seçici seçeneği belirtin.

• Demo BS 3
• Demo BS 2

HTML:

<a href="#" id="blob" class="btn large primary" rel="popover" style="margin-top: 
100px">hover for popover</a> 

<a href="#" id="blob2" class="btn large primary" data-trigger="hover" rel="popover" data-html="true" data-content='<iframe frameborder="0" scrolling="no" height="220" width="420" 
src="http://dxlite.g7vjr.org/?dx=LU5DX&limit=10"></iframe>' style="margin-top: 100px">hover for popover</a> 

JS:

$(window).load(function(){ 
var img = '<iframe frameborder="0" scrolling="no" height="220" width="420" src="http://dxlite.g7vjr.org/?dx=LU5DX&limit=10"></iframe>'; 
    $("#blob").popover({title: 'Last 10 spots for the selected station', content: img, html:true}); 
    $('[rel="popover"]').popover(); 
})