HTML ट्विटर बूटस्ट्रैप पॉपओवर के अंदर

288

मैं बूटस्ट्रैप पॉपओवर के अंदर HTML प्रदर्शित करने की कोशिश कर रहा हूं, लेकिन किसी तरह यह काम नहीं कर रहा है। मुझे यहाँ कुछ उत्तर मिले लेकिन यह मेरे लिए काम नहीं करेगा। कृपया मुझे बताएं कि क्या मैं कुछ गलत कर रहा हूं।

<script>
  $(function(){
    $('[rel=popover]').popover({ 
      html : true, 
      content: function() {
        return $('#popover_content_wrapper').html();
      }
    });
  });
</script>

<li href="#" id="example" rel="popover" data-content="" data-original-title="A Title"> 
    popover
</li>

<div id="popover_content_wrapper" style="display: none">
    <div>This is your div content</div>
</div>
html  twitter-bootstrap  popover 
— एड्रियन Mojica
स्रोत
1
— ओल्गा

जवाबों:

351

आप इसका उपयोग नहीं कर सकते, <li href="#"क्योंकि यह <a href="#"इसीलिए काम नहीं कर रहा था, इसे बदलें और यह सब अच्छा है।

यहाँ JSFiddle काम कर रही है जो आपको बताती है कि बूटस्ट्रैप पॉपओवर कैसे बनाया जाता है।

कोड का प्रासंगिक भाग नीचे है:

HTML:

<!-- 
Note: Popover content is read from "data-content" and "title" tags.
-->
<a tabindex="0"
   class="btn btn-lg btn-primary" 
   role="button" 
   data-html="true" 
   data-toggle="popover" 
   data-trigger="focus" 
   title="<b>Example popover</b> - title" 
   data-content="<div><b>Example popover</b> - content</div>">Example popover</a>

जावास्क्रिप्ट:

$(function(){
    // Enables popover
    $("[data-toggle=popover]").popover();
});

और वैसे, आपको हमेशा कम से कम $("[data-toggle=popover]").popover();पॉपओवर को सक्षम करने की आवश्यकता होती है । लेकिन आप के स्थान पर data-toggle="popover"उपयोग id="my-popover"या भी कर सकते हैं class="my-popover"। बस $("#my-popover").popover();उन मामलों में जैसे: का उपयोग कर उन्हें सक्षम करने के लिए याद रखें ।

यहाँ पूरी युक्ति का लिंक दिया गया है: बूटस्ट्रैप पॉपओवर

बक्शीश:

यदि किसी कारण से आपको पसंद नहीं है data-toggleऔर titleटैग से पॉपअप की सामग्री नहीं पढ़ सकते हैं । आप उदाहरण के लिए छिपे हुए div और थोड़ा और JavaScript का भी उपयोग कर सकते हैं। यहाँ उस के बारे में एक उदाहरण है।

— मौनो वैह
स्रोत
1
पृष्ठ के शीर्ष पर स्क्रॉल करने से रोकने के लिए ANCHOR टैग तत्वों पर HREF href = "#" निकालें!
— peter_pilgrim
@peter_pilgrim यह कहने के लिए धन्यवाद। मैंने बूटस्ट्रैप के नवीनतम संस्करण का उपयोग करने के लिए अपने उत्तर को अपडेट किया और <a> टैग से href = "#" तय किया और उन्हें बटन के बजाय व्यवहार किया। (यह बूटस्ट्रैप साइट पर भी प्रलेखित है)। मेरे जवाब के अंत में उस लिंक को जोड़ा।
— Mauno Vähä
मुझे iOS उपकरणों के साथ एक समस्या मिली। पॉपओवर टच स्क्रीन के साथ काम करता है। क्या आपने आस-पास एक सामान्य काम पाया है? दरअसल, मुझे लगता है कि यह बूटस्ट्रैप पॉपओवर कोड के साथ भी होता है। कोई विचार?
— peter_pilgrim
286

आप विशेषता का उपयोग कर सकते हैं data-html="true":

<a href="#" id="example"  rel="popover" 
    data-content="<div>This <b>is</b> your div content</div>" 
    data-html="true" data-original-title="A Title">popover</a>
— डेनिस मुंकले
स्रोत
क्या gwtbootstrap3 में इसका उपयोग करने का कोई तरीका है, यह इस रूप में काम नहीं करता है। मैंने यहां सवाल पूछा है stackoverflow.com/questions/34142815/… , लेकिन अब तक कोई जवाब नहीं।
— ivan_bilan 21
उपरोक्त उत्तर को सही के रूप में चिह्नित क्यों किया गया है, यह नहीं जानते। हो सकता है कि लोग अपनी नौकरियों को संरक्षित करने के लिए जानबूझकर सबसे जटिल विकल्प चुनते हैं।
— स्टीफन
मेरे पास मेरे पेज के निचले हिस्से में यह पॉपओवर है और इसे छोड़कर महान काम करता है ... यह मुझे पृष्ठ के शीर्ष पर वापस जाने के लिए सभी तरह से स्थानांतरित करता है। मैंने इसे बूटस्ट्रैप थंबनेल के फ़ॉरच लूप में सेट किया है। कोई विचार?
— foxtangocharlie
107

पुन: प्रयोज्य तरीके से पॉपओवर सामग्री को निर्दिष्ट करने का एक और तरीका data-popover-contentयह है कि इस तरह एक नया डेटा गुण बनाया जाए और इसका उपयोग किया जाए:

HTML:

<!-- Popover #1 -->
<a class="btn btn-primary" data-placement="top" data-popover-content="#a1" data-toggle="popover" data-trigger="focus" href="#" tabindex="0">Popover Example</a>

<!-- Content for Popover #1 -->
<div class="hidden" id="a1">
  <div class="popover-heading">
    This is the heading for #1
  </div>

  <div class="popover-body">
    This is the body for #1
  </div>
</div>

जे एस:

$(function(){
    $("[data-toggle=popover]").popover({
        html : true,
        content: function() {
          var content = $(this).attr("data-popover-content");
          return $(content).children(".popover-body").html();
        },
        title: function() {
          var title = $(this).attr("data-popover-content");
          return $(title).children(".popover-heading").html();
        }
    });
});

यह तब उपयोगी हो सकता है जब आपके पास अपने पॉपओवर में रखने के लिए बहुत सारे html हों।

यहाँ एक उदाहरण है फिडल: http://jsfiddle.net/z824fn6b/

— जैक
स्रोत
1
यह मॉड्यूलर दृष्टिकोण काफी सुरुचिपूर्ण है। आपके पास कई पॉपओवर और बस एक सामान्य जावास्क्रिप्ट फ़ंक्शन हो सकते हैं।
— xtian
2
यह बहुत अच्छा है, @ जेक, धन्यवाद। मुझे HTML को विशेषताओं में नहीं रखना पसंद है। बहुत गंदा।
— जॉन वाशम
यहाँ बहुत बढ़िया काम, सादगी और उपयोगिता से प्यार करते हैं
— FastTrack
आप असली एमवीपी
— 22
यह बूटस्ट्रैप 3.4.1 के साथ काम नहीं करता है, क्या आप मदद कर सकते हैं? @Jack stackoverflow.com/questions/60514533/…
— user2513846
84

आपको एक पॉपओवर इंस्टेंस बनाने की जरूरत है जिसमें HTML विकल्प सक्षम हो (पॉपुलेशन JS कोड के बाद इसे अपनी जावास्क्रिप्ट फाइल में रखें):

$('.popover-with-html').popover({ html : true });

— माइक ल्यूसिड
स्रोत
22

मैंने एक सूची के अंदर एक पॉप का उपयोग किया, Im HTML के माध्यम से एक उदाहरण दे रहा हूं

<a type="button" data-container="body" data-toggle="popover" data-html="true" data-placement="right" data-content='<ul class="nav"><li><a href="#">hola</li><li><a href="#">hola2</li></ul>'>
— user3319310
स्रोत
1
html कोड को रैप करने के लिए विभिन्न कोट्स का उपयोग करके सबसे सरल तरीका। अच्छी सोच।
— बजे जिमी इलेनॉला
अच्छा, वास्तविक चाल डबल कोट्स को सिंगल कोट्स में बदल रही है!
— स्टीवन बैरागान
6

यह जैक के उत्कृष्ट उत्तर पर एक मामूली संशोधन है ।

निम्नलिखित सुनिश्चित करता है कि सरल पॉपओवर, HTML सामग्री के बिना अप्रभावित रहें।

जावास्क्रिप्ट:

$(function(){
    $('[data-toggle=popover]:not([data-popover-content])').popover();
    $('[data-toggle=popover][data-popover-content]').popover({
        html : true,
        content: function() {
          var content = $(this).attr("data-popover-content");
          return $(content).children(".popover-body").html();
        },
        title: function() {
          var title = $(this).attr("data-popover-content");
          return $(title).children(".popover-heading").html();
        }
    });
});
— मार्क ए
स्रोत
4

मैं वास्तव में लंबे एचटीएमएल को विशेषता के अंदर रखने से नफरत करता हूं, यहां मेरा समाधान, स्पष्ट और सरल है (प्रतिस्थापित करें? जो भी आप चाहते हैं):

<a class="btn-lg popover-dismiss" data-placement="bottom" data-toggle="popover" title="Help">
    <h2>Some title</h2>
    Some text
</a>

फिर

var help = $('.popover-dismiss');
help.attr('data-content', help.html()).text(' ? ').popover({trigger: 'hover', html: true});
— user1079877
स्रोत
4

यह एक पुराना प्रश्न है, लेकिन यह एक और तरीका है, जो पॉपुवर का पुन: उपयोग करने के लिए jQuery का उपयोग करता है और इसे और अधिक अर्थपूर्ण बनाने के लिए मूल बूटस्ट्रैप डेटा विशेषताओं का उपयोग करता रहता है:

सम्बन्ध

<a href="#" rel="popover" data-trigger="focus" data-popover-content="#popover">
   Show it!
</a>

कस्टम सामग्री दिखाने के लिए

<!-- Let's show the Bootstrap nav on the popover-->
<div id="list-popover" class="hide">
    <ul class="nav nav-pills nav-stacked">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li><a href="#">Separated link</a></li>
    </ul>
</div>

जावास्क्रिप्ट

$('[rel="popover"]').popover({
    container: 'body',
    html: true,
    content: function () {
        var clone = $($(this).data('popover-content')).clone(true).removeClass('hide');
        return clone;
    }
});

पूर्ण उदाहरण के साथ फिडेल: http://jsfiddle.net/tomsarduy/262w45L5/

— टॉम सरदयू
स्रोत
2

आप फ़ाइल 'ui-bootstrap-tpls-0.11.0.js' 'टेम्पलेट / पॉपओवर / popover.html' को बदल सकते हैं: "ng-bind" के बजाय "bind-html-unsafe" लिखें

यह html के साथ सभी पॉपओवर दिखाएगा। * इसका असुरक्षित html। यदि आप html पर भरोसा करते हैं तो ही उपयोग करें।

— गाइ बीबर
स्रोत
0

आप पॉपओवर ईवेंट का उपयोग कर सकते हैं, और विशेषता 'डेटा-चौड़ाई' द्वारा चौड़ाई को नियंत्रित कर सकते हैं

$('[data-toggle="popover-huongdan"]').popover({ html: true });
$('[data-toggle="popover-huongdan"]').on("shown.bs.popover", function () {
    var width = $(this).attr("data-width") == undefined ? 276 : parseInt($(this).attr("data-width"));
    $("div[id^=popover]").css("max-width", width);
});
 <a class="position-absolute" href="javascript:void(0);" data-toggle="popover-huongdan" data-trigger="hover" data-width="500" title="title-popover" data-content="html-content-code">
 <i class="far fa-question-circle"></i>
 </a>
स्निपेट का विस्तार करें

— Vĩnh Phú Ngô
स्रोत
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.