बूटस्ट्रैप पॉपओवर के भीतर फॉर्म होता है?

Question

<div class="container">
    <div class="row" style="padding-top: 240px;">
        <a href="#" class="btn btn-large btn-primary" rel="popover"
            data-content="<form><input type="text"/></form>"
            data-placement="top" data-original-title="Fill in form">Open form</a>
    </div>
</div>

JSfiddle

मैं अनुमान लगा रहा हूं कि मैं एक जावास्क्रिप्ट फ़ंक्शन के भीतर प्रपत्र सामग्री संग्रहीत करूंगा ...

बूटस्ट्रैप पॉपओवर के भीतर मेरा एक फ़ॉर्म कैसे होता है?

Answer 1

या तो डबल कोट्स type="text"को सिंगल कोट्स के साथ बदलें , जैसे

"<form><input type='text'/></form>"

या

सिंगल data-contentकोट्स, लाइक के साथ रैपिंग डबल कोट्स को बदलें

data-content='<form><input type="text"/></form>'

Comments

बटन टैग में "data-html = 'true' मत भूलना

— cwirz

Answer 2

मैं अपने फॉर्म को मार्कअप में डालूंगा, न कि कुछ डेटा टैग में। यह है कि यह कैसे काम कर सकता है:

जेएस कोड:

$('#popover').popover({ 
    html : true,
    title: function() {
      return $("#popover-head").html();
    },
    content: function() {
      return $("#popover-content").html();
    }
});

HTML मार्कअप:

<a href="#" id="popover">the popover link</a>
<div id="popover-head" class="hide">
  some title
</div>
<div id="popover-content" class="hide">
  <!-- MyForm -->
</div>

डेमो

वैकल्पिक दृष्टिकोण:

एक्स-संपादन योग्य

आप X-Editable पर एक नज़र डालना चाहते हैं । एक पुस्तकालय जो आपको पॉपओवर के आधार पर अपने पृष्ठ पर संपादन योग्य तत्व बनाने की अनुमति देता है।

Webcomponents

माइक कॉस्टेलो ने बूटस्ट्रैप वेब कंपोनेंट जारी किया है । इस निफ्टी लाइब्रेरी में एक पॉपओवर कंपोनेंट है जो आपको मार्कअप के रूप में एम्बेड करने देता है:

<button id="popover-target" data-original-title="MyTitle" title="">Popover</button>

<bs-popover title="Popover with Title" for="popover-target">
  <!-- MyForm -->
</bs-popover>

डेमो

Comments

अच्छा समाधान है, मैं सिर्फ एक अतिरिक्त div नहीं होने के लिए टैग के data-title="Some Title"भीतर शीर्षक डाल दिया <a id="myID">...

— पेबो 3

एकमात्र सही जवाब।

— पोइट्रोए

@HaNdTriX +10 जिस तरह से आपने इसे डाला है।

— 2sb

कृपया पढ़ें: getbootstrap.com/javascript/#popovers आप triggerविकल्प तलाश रहे हैं । ( trigger: 'focus')

— HaNdTriX

आप का उपयोग क्यों नहीं कर रहे हैं: कोणीय-ui.github.io/bootstrap/#/popover ? इसे आपकी समस्याओं का समाधान करना चाहिए।

— HaNdTriX

Answer 3

<a data-title="A Title" data-placement="top" data-html="true" data-content="<form><input type='text'/></form>" data-trigger="hover" rel="popover" class="btn btn-primary" id="test">Top popover</a>

बस राज्य डेटा-html = "सही"

Answer 4

इस वर्किंग डेमो की तरह http://jsfiddle.net/7e2XU/21/show/# * अपडेट: http://jsfiddle.net/kz5kjmbt/

 <div class="container">
    <div class="row" style="padding-top: 240px;"> <a href="#" class="btn btn-large btn-primary" rel="popover" data-content='
<form id="mainForm" name="mainForm" method="post" action="">
    <p>
        <label>Name :</label>
        <input type="text" id="txtName" name="txtName" />
    </p>
    <p>
        <label>Address 1 :</label>
        <input type="text" id="txtAddress" name="txtAddress" />
    </p>
    <p>
        <label>City :</label>
        <input type="text" id="txtCity" name="txtCity" />
    </p>
    <p>
        <input type="submit" name="Submit" value="Submit" />
    </p>
</form>
 data-placement="top" data-original-title="Fill in form">Open form</a>

    </div>
</div>

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

    $('a[rel=popover]').popover({
      html: 'true',
      placement: 'right'
    })

स्क्रीनशॉट

Comments

@DERIIIFranz अभी तय किया गया धन्यवाद: jsfiddle.net/kz5kjmbt CDN लापता हो गया, चेकआउट अपडेट लिंक और स्क्रीनशॉट। :)

— Tats_innit

यह समाधान वर्तमान क्रोम पर काम करता है और प्रश्न का उत्तर देता है। हालांकि, HTML विशेषताओं के भीतर जटिल मार्कअप होने में त्रुटि हो सकती है और कोड की स्थिरता और सीखने की क्षमता पर जोखिम जोड़ सकते हैं।

— रिकार्डो

Answer 5

आप divबूटस्ट्रैप-प्रदत्त hiddenवर्ग के साथ एक छिपे हुए तत्व से फ़ॉर्म लोड कर सकते हैं ।

<button class="btn btn-default" id="form-popover">Form popover</button>

<div class="hidden">
  <form id="form">
    <input type="text" class="form-control" />
  </form>
</div>

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

$('#form-popover').popover({
    content: $('#form').parent().html(),
    html: true,
});

Comments

$(...).parent().html()साथ बदलें $(...).clone();)

— Rhys ब्रैडबरी

Answer 6

या यह एक कोशिश करो

दूसरा काम करने के लिए दूसरा छिपा हुआ डिव कंटेंट सहित दूसरा काम करना और फिडल पर परीक्षण करना http://jsfiddle.net/7e2XU/21/

<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js">
   <script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-tooltip.js"></script>
    <script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-popover.js"></script>


<div id="popover-content" style="display: none" >
    <div class="container" style="margin: 25px; ">
    <div class="row" style="padding-top: 240px;">
        <label id="sample">
            <form id="mainForm" name="mainForm" method="post" action="">
    <p>
        <label>Name :</label>
        <input type="text" id="txtName" name="txtName" />
    </p>
    <p>
        <label>Address 1 :</label>
        <input type="text" id="txtAddress" name="txtAddress" />
    </p>
    <p>
        <label>City :</label>
        <input type="text" id="txtCity" name="txtCity" />
    </p>
    <p>
        <input type="submit" name="Submit" value="Submit" />
    </p>
</form>

        </label>
    </div>
          </div> 
</div>

 <a href="#" style="margin: 40px 40px;" class="btn btn-large btn-primary" rel="popover" data-content='' data-placement="left" data-original-title="Fill in form">Open form</a>


<script>

$('a[rel=popover]').popover({
    html: 'true',
placement: 'right',
content : function() {
    return $('#popover-content').html();
}
})



</script>

Comments

यह एक अच्छा समाधान है लेकिन आपका jsfiddle लिंक एक ही कार्यान्वयन के अनुरूप नहीं लगता है। आपको यह प्लंक लगता है कि मैंने इसे सही तरीके से लागू किया है: plnkr.co/edit/IV2YbLCFSiYI0T1mXOLN?p=preview ।

— बर्नार्डन

Answer 7

किसी को भी इसकी आवश्यकता हो सकती है, इसके लिए एक पूर्ण समाधान, मैंने अब तक अच्छे परिणामों के साथ इसका उपयोग किया है

जे एस:

$(".btn-popover-container").each(function() {
    var btn = $(this).children(".popover-btn");
    var titleContainer = $(this).children(".btn-popover-title");
    var contentContainer = $(this).children(".btn-popover-content");

    var title = $(titleContainer).html();
    var content = $(contentContainer).html();

    $(btn).popover({
        html: true,
        title: title,
        content: content,
        placement: 'right'
    });
});

HTML:

<div class="btn-popover-container">
    <button type="button" class="btn btn-link popover-btn">Button Name</button>
    <div class="btn-popover-title">
        Popover Title
    </div>
    <div class="btn-popover-content">
        <form>
          Or Other content..
        </form>
    </div>
</div>

सीएसएस:

.btn-popover-container {
    display: inline-block;
}


.btn-popover-container .btn-popover-title, .btn-popover-container .btn-popover-content {
    display: none;
}

Answer 8

मैं वर्डप्रेस में बहुत काम करता हूं इसलिए PHP का उपयोग करें।

मेरी विधि एक PHP चर में मेरे HTML को समाहित करने के लिए है, और फिर चर में गूंज data-content।

$my-data-content = '<form><input type="text"/></form>';

साथ में

data-content='<?php echo $my-data-content; ?>'