বুটস্ট্র্যাপ পপওভারের মধ্যে ফর্ম রয়েছে?

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>

জেএসফিডাল

আমি অনুমান করছি যে আমি ফর্মের সামগ্রীগুলি জাভাস্ক্রিপ্ট ফাংশনে সংরক্ষণ করব ...

আমি কীভাবে বুটস্ট্র্যাপ পপওভারের মধ্যে একটি ফর্ম রাখতে পারি?

Answer 1

হয় ডাবল কোট চারপাশে type="text"একক উদ্ধৃতি, পছন্দ মত প্রতিস্থাপন

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

বা

ডাবল উদ্ধৃতি মোড়ক প্রতিস্থাপন করুন data-contentসিংকে উদ্ধৃতি, ভালো লেগেছে

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

Comments

বোতাম ট্যাগের "ডেটা-এইচটিএমএল = 'সত্য'" ভুলে যাবেন না

— cwirz

Answer 2

আমি আমার ফর্মটি কিছু ডেটা ট্যাগের মধ্যে না দিয়ে মার্কআপে রেখে দেব। এটি এভাবে কাজ করতে পারে:

জেএস কোড:

$('#popover').popover({ 
    html : true,
    title: function() {
      return $("#popover-head").html();
    },
    content: function() {
      return $("#popover-content").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>

ডেমো

বিকল্প পদ্ধতি:

এক্স-সম্পাদনাযোগ্য

আপনি এক্স-এডিটেবলের দিকে একবার নজর রাখতে চাইতে পারেন । একটি লাইব্রেরি যা আপনাকে পপওভারের ভিত্তিতে আপনার পৃষ্ঠায় সম্পাদনাযোগ্য উপাদান তৈরি করতে দেয় allows

ওয়েব কম্পোনেন্ট

মাইক কস্টেলো বুটস্ট্র্যাপ ওয়েব উপাদান প্রকাশ করেছে । এই নিফটি লাইব্রেরিতে একটি পপওভার উপাদান রয়েছে যা আপনাকে ফর্মটিকে মার্কআপ হিসাবে এম্বেড করতে দেয়:

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

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

ডেমো

Comments

ভাল সমাধান, আমি কেবল অতিরিক্ত data-title="Some Title"<a id="myID">

— ডিভ

একমাত্র সত্য উত্তর।

— পোইট্রোয়ে

আপনি যেভাবে এটি রেখেছেন তার জন্য @ হানডিডিট্রিক্স +10।

— এসবি

দয়া করে পড়ুন: 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>

শুধু তথ্য ডেটা-এইচটিএমএল = "সত্য"

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

@ ডেরিআইআইফরানজ ধন্যবাদ এখনই এটি ঠিক করা হয়েছে: jsfiddle.net/kz5kjmbt সিডিএন নিখোঁজ হয়েছে, চেকআউট আপডেট হওয়া লিঙ্ক এবং স্ক্রিনশট। :)

— Tats_innit

এই সমাধানটি বর্তমান ক্রোমে কাজ করে এবং প্রশ্নের উত্তর দেয়। তবে, এইচটিএমএল বৈশিষ্ট্যগুলির মধ্যে জটিল মার্কআপগুলি থাকা ত্রুটি-প্রবণ হতে পারে এবং কোডটির রক্ষণাবেক্ষণ এবং শেখার ক্ষেত্রে ঝুঁকি যুক্ত করতে পারে।

— রিকার্ডো

Answer 5

আপনি divবুটস্ট্র্যাপ সরবরাহকারী hiddenশ্রেণীর সাথে কোনও লুকানো উপাদান থেকে ফর্মটি লোড করতে পারেন can

<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()

— রাইস ব্র্যাডবেরি

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= পূর্বরূপ ।

— বার্নার্ডন

Answer 7

যার প্রয়োজন হতে পারে তার জন্য একটি সম্পূর্ণ সমাধান, আমি এ পর্যন্ত ভাল ফলাফল সহ এটি ব্যবহার করেছি with

জেএস:

$(".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'
    });
});

এইচটিএমএল:

<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

আমি ওয়ার্ডপ্রেসে অনেক কাজ করি তাই পিএইচপি ব্যবহার করি।

আমার পদ্ধতিটি হ'ল পিএইচপি ভেরিয়েবলে আমার এইচটিএমএল থাকা এবং তারপরে ভেরিয়েবলটি প্রতিধ্বনি করা data-content।

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

সাথে

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