क्या ट्विटर के पॉपओवर

Question

के लिए सामग्री के रूप में div का उपयोग करना संभव है। मैं ट्विटर के बूटस्ट्रैप के पॉपओवर here का उपयोग कर रहा हूं। फिलहाल, जब मैं पॉपओवर टेक्स्ट पर स्क्रॉल करता हूं तो एक पॉपओवर <a> की data-content विशेषता से केवल टेक्स्ट के साथ दिखाई देता है। मैं सोच रहा था कि पॉपओवर के अंदर <div> डालने के लिए वैसे भी था। संभावित रूप से, मैं वहां php और mysql का उपयोग करना चाहता हूं, लेकिन अगर मैं काम करने के लिए एक div प्राप्त कर सकता हूं तो मुझे लगता है कि मैं बाकी को समझ सकता हूं। मैंने div आईडी पर डेटा-सामग्री सेट करने का प्रयास किया, लेकिन यह काम नहीं किया।

HTML:

<a class='danger' 
    data-placement='above' 
    rel='popover' 
    data-content='#PopupDiv' 
    href='#'>Click</a> 

Answer 1

सबसे पहले, आप सच करने के लिए HTML विकल्प निर्धारित करने की आवश्यकता आप सामग्री के अंदर HTML का उपयोग करना चाहते हैं:

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

तो आपके पास दो विकल्प सेट करने के लिए एक पॉपओवर

• डेटा-सामग्री विशेषता का उपयोग करें। यह डिफॉल्ट विकल्प है।
• एक कस्टम जेएस फ़ंक्शन का उपयोग करें जो HTML सामग्री देता है।

डेटा-सामग्री का उपयोग करना: आप HTML सामग्री से बचने के लिए की जरूरत है कुछ इस तरह:

<a class='danger' data-placement='above' 
    data-content="&lt;div&gt;This is your div content&lt;/div&gt;" 
    title="Title" href='#'>Click</a> 

आप या तो HTML मैन्युअल रूप से बचने के लिए या एक समारोह का उपयोग कर सकते हैं। मुझे PHP के बारे में पता नहीं है लेकिन रेल में हम * html_safe * का उपयोग करते हैं।

एक जेएस फ़ंक्शन का उपयोग: यदि आप ऐसा करते हैं, तो आपके पास कई विकल्प हैं। सबसे आसान मुझे लगता है कि जहां भी आप चाहें अपनी div सामग्री को छुपाएं और उसके बाद पॉपओवर पर अपनी सामग्री को पास करने के लिए एक फ़ंक्शन लिखें। कुछ इस तरह:

$(document).ready(function(){ 
    $('.danger').popover({ 
    html : true, 
    content: function() { 
     return $('#popover_content_wrapper').html(); 
    } 
    }); 
}); 

और फिर अपने HTML इस तरह दिखता है:

<a class='danger' data-placement='above' title="Popover Title" href='#'>Click</a> 
<div id="popover_content_wrapper" style="display: none"> 
    <div>This is your div content</div> 
</div> 

आशा है कि यह मदद करता है!

पीएस: पॉपओवर का उपयोग करते समय मुझे कुछ परेशानी हुई हैं और शीर्षक विशेषता सेट नहीं कर रहा है ... इसलिए, हमेशा शीर्षक सेट करना याद रखें।

Answer 2

यदि आप पॉप ओवर को देखना और महसूस करना चाहते हैं तो एक और वैकल्पिक तरीका है। विधि है निम्नलिखित है।Offcourse इस एक मैनुअल बात है, लेकिन अच्छी तरह से व्यावहारिक :)

एचटीएमएल - बटन

<button class="btn btn-info btn-small" style="margin-right:5px;" id="bg" data-placement='bottom' rel="tooltip" title="Background Image"><i class="icon-picture icon-white"></i></button> 

एचटीएमएल - पॉपओवर

<div class="bgform popover fade bottom in"> 
      <div class="arrow"></div> 
      ..... your code here ....... 
</div> 

जे एस

$("#bg").click(function(){ 
     $('.bgform').slideToggle(); 
}); 

Answer 3

बिल्डिंग Javi के जवाब पर, इस आईडी या अतिरिक्त बटन विशेषताओं के बिना किया जा सकता है:

http://jsfiddle.net/isherwood/E5Ly5/

<button class="popper" data-toggle="popover">Pop me</button> 
<div class="popper-content hide">My first popover content goes here.</div> 

<button class="popper" data-toggle="popover">Pop me</button> 
<div class="popper-content hide">My second popover content goes here.</div> 

<button class="popper" data-toggle="popover">Pop me</button> 
<div class="popper-content hide">My third popover content goes here.</div> 

$('.popper').popover({ 
    container: 'body', 
    html: true, 
    content: function() { 
     return $(this).next('.popper-content').html(); 
    } 
}); 

Answer 4

पार्टी के लिए देर से। अन्य समाधानों का निर्माण। मुझे परिवर्तनीय के रूप में लक्षित डीआईवी पास करने का एक तरीका चाहिए। मैंने जो किया था यह रहा।

<div data-html="true" data-toggle="popover" data-pop="popper-content" class="popper"> 

एचटीएमएल पॉपओवर सामग्री के लिए (मैं हूं: पॉपओवर स्रोत के लिए

एचटीएमएल (एक डेटा विशेषता डेटा पॉप कि गंतव्य div id/या वर्ग के लिए मूल्य का आयोजन करेगा जोड़ा) वर्ग का उपयोग कर बूटस्ट्रैप छिपाने):

<div id="popper-content" class="hide">Content goes here</div> 

स्क्रिप्ट:

$('.popper').popover({ 
placement: popover_placement, 
container: 'div.page-content', 
html: true, 
trigger: 'hover', 
content: function() { 
    var pop_dest = $(this).attr("data-pop"); 
    //console.log(plant); 
    return $("#"+pop_dest).html(); 
}}); 

Answer 5

अन्य उत्तरों के अलावा। यदि आप विकल्पों में html की अनुमति देते हैं तो आप सामग्री पर jQuery ऑब्जेक्ट पास कर सकते हैं, और इसे सभी ईवेंट और बाइंडिंग के साथ पॉपओवर की सामग्री में जोड़ा जाएगा।

• यदि आप एक समारोह
• अगर html अनुमति नहीं है सामग्री डेटा पाठ के रूप में लागू किया जाएगा यह सामग्री डेटा खोलने में बुलाया जाएगा पारित
• अगर html अनुमति और सामग्री: यहाँ स्रोत कोड से तर्क है डेटा स्ट्रिंग के रूप में html
• अन्यथा सामग्री डेटा पॉपओवर की सामग्री कंटेनर से जोड़ दिए जाएंगे यह लागू किया जाएगा है

$("#popover-button").popover({ 
    content: $("#popover-content"), 
    html: true, 
    title: "Popover title" 
}); 

Answer 6

here is an another example 

<a data-container = "body" data-toggle = "popover" data-placement = "left" 
    data-content = "&lt;img src='<?php echo baseImgUrl . $row1[2] ?>' width='250' height='100' &gt;&lt;div&gt;&lt;h3&gt; <?php echo $row1['1'] ?>&lt/h3&gt; &lt;p&gt; &lt;span&gt;<?php echo $countsss ?>videos &lt;/span&gt; 
&lt;span&gt;<?php echo $countsss1 ?> followers&lt;/span&gt; 
&lt;/p&gt;&lt;/div&gt; 
<?php echo $row1['4'] ?> &lt;hr&gt;&lt;div&gt; 
&lt;span&gt; &lt;button type='button' class='btn btn-default pull-left green'&gt;Follow &lt;/button&gt; &lt;/span&gt; &lt;span&gt; &lt;button type='button' class='btn btn-default pull-left green'&gt; Go to channel page&lt;/button&gt; &lt;/span&gt;&lt;span&gt; &lt;button type='button' class='btn btn-default pull-left green'&gt;Close &lt;/button&gt; &lt;/span&gt; 

&lt;/div&gt;"> 

<?php echo $row1['1'] ?> 
    </a> 

Answer 7

इतना जटिल क्यों? बस इसे रखें:

data-html='true' 

Answer 8

इन सभी उत्तरों में एक बहुत ही महत्वपूर्ण पहलू याद आती है!

.html या innerHtml या outerHtml का उपयोग करके आप वास्तव में संदर्भित तत्व का उपयोग नहीं कर रहे हैं। आप तत्व के एचटीएमएल की एक प्रति का उपयोग कर रहे हैं। इसमें कुछ गंभीर ड्रॉ बैक हैं।

1. आप किसी भी आईडी का उपयोग नहीं कर सकते हैं क्योंकि आईडी को डुप्लिकेट किया जाएगा।
2. यदि आप पॉपवर दिखाए जाने पर हर बार सामग्री लोड करते हैं तो आप उपयोगकर्ता के सभी इनपुट खो देंगे।

आप जो करना चाहते हैं वह ऑब्जेक्ट को पॉपओवर में लोड कर रहा है।

https://jsfiddle.net/shrewmouse/ex6tuzm2/4/

HTML:

<h1> Test </h1> 

<div><button id="target">click me</button></div> 

<!-- This will be the contents of our popover --> 
<div class='_content' id='blah'> 
<h1>Extra Stuff</h1> 
<input type='number' placeholder='number'/> 
</div> 

JQuery:

$(document).ready(function() { 

    // We don't want to see the popover contents until the user clicks the target. 
    // If you don't hide 'blah' first it will be visible outside of the popover. 
    // 
    $('#blah').hide(); 

    // Initialize our popover 
    // 
    $('#target').popover({ 
     content: $('#blah'), // set the content to be the 'blah' div 
     placement: 'bottom', 
     html: true 
    }); 
    // The popover contents will not be set until the popover is shown. Since we don't 
    // want to see the popover when the page loads, we will show it then hide it. 
    // 
    $('#target').popover('show'); 
    $('#target').popover('hide'); 

    // Now that the popover's content is the 'blah' dive we can make it visisble again. 
    // 
    $('#blah').show(); 


});