পৃষ্ঠায় যে কোনও জায়গা থেকে (অন্য) ক্লিক করে আমি কীভাবে একটি টুইটার বুটস্ট্র্যাপ পপওভার বন্ধ করতে পারি?

Question

আমি বর্তমানে টুইটার বুটস্ট্র্যাপের সাহায্যে পপওভারগুলি ব্যবহার করছি, এটির মতো শুরু করা:

$('.popup-marker').popover({
        html: true,
        trigger: 'manual'
    }).click(function(e) {
        $(this).popover('toggle');
        e.preventDefault();
    });

আপনি দেখতে পাচ্ছেন যে এগুলি ম্যানুয়ালি ট্রিগার করা হয়েছে এবং .পপআপ-মার্কার (যা একটি পটভূমির চিত্র সহ একটি ডিভ) ক্লিক করে একটি পপওভার টগল করে। এটি দুর্দান্ত কাজ করে তবে আমি চাই পৃষ্ঠার অন্য কোথাও একটি ক্লিক করে পপওভারটি বন্ধ করতে সক্ষম হতে (তবে পপওভারে নিজেই নয়!)।

নিম্নলিখিতগুলি সহ আমি কয়েকটি ভিন্ন জিনিস চেষ্টা করেছি, তবে এর জন্য কোনও ফলাফল না দিয়ে:

$('body').click(function(e) {
    $('.popup-marker').popover('hide');
});

আমি কীভাবে পপওভারটি অন্য যে কোনও পৃষ্ঠায় ক্লিক করে পপওভারটি বন্ধ করতে পারি, তবে পপওভারটিতে ক্লিক করেই না?

Comments

এইচএম, আমি ভাবব যে এটি কার্যকর হবে ... আপনার কি এই সুযোগে অনলাইনে একটি লিঙ্ক আছে?

— থ্রায়ান

Answer 1

অনুমান করে যে কেবলমাত্র একটি পপওভার যে কোনও সময় দৃশ্যমান হতে পারে, যখন কোনও পপওভার দৃশ্যমান থাকে তখন চিহ্নিত করার জন্য আপনি কয়েকটি পতাকা ব্যবহার করতে পারেন এবং কেবল তখনই সেগুলি লুকিয়ে রাখুন।

আপনি যদি নথির বডিতে ইভেন্ট শ্রোতাকে সেট করেন, আপনি যখন 'পপআপ-মার্কার' দ্বারা চিহ্নিত উপাদানটিতে ক্লিক করেন তখন এটি ট্রিগার হয়ে যায়। সুতরাং আপনি stopPropagation()ইভেন্ট অবজেক্ট কল করতে হবে । এবং পপওভারে নিজেই ক্লিক করার সময় একই কৌশলটি প্রয়োগ করুন।

নীচে একটি কাজ করছে জাভাস্ক্রিপ্ট কোড যা এটি করে। এটি jQuery> = 1.7 ব্যবহার করে

jQuery(function() {
    var isVisible = false;

    var hideAllPopovers = function() {
       $('.popup-marker').each(function() {
            $(this).popover('hide');
        });  
    };

    $('.popup-marker').popover({
        html: true,
        trigger: 'manual'
    }).on('click', function(e) {
        // if any other popovers are visible, hide them
        if(isVisible) {
            hideAllPopovers();
        }

        $(this).popover('show');

        // handle clicking on the popover itself
        $('.popover').off('click').on('click', function(e) {
            e.stopPropagation(); // prevent event for bubbling up => will not get caught with document.onclick
        });

        isVisible = true;
        e.stopPropagation();
    });


    $(document).on('click', function(e) {
        hideAllPopovers();
        isVisible = false;
    });
});

http://jsfiddle.net/AFffL/539/

একমাত্র সতর্কতা হ'ল আপনি একই সময়ে 2 টি পপওভার খুলতে পারবেন না। তবে আমি মনে করি এটি ব্যবহারকারীর জন্য বিভ্রান্তিকর হবে, যাইহোক :-)

Comments

সেই jsfizz এ পপওভারটিতে ক্লিক করা পপওভারকে আড়াল করে - tnorthcutt যা চেয়েছিল তা নয়।

— জনাথন হিল 16

@ রাদুকুগুট একটি দুর্দান্ত সমাধান দেবে। তবে এটি একটি বাগ আছে। Zzzzz একবার ক্লিক করুন এবং পপওভার প্রদর্শিত হবে। এখন সাদা পটভূমিতে একবার ক্লিক করুন। পপআপ অদৃশ্য হয়ে যায়। এবার সাদা পটভূমিতে আবার ক্লিক করুন। এবং এখন zzzz এ আবার ক্লিক করুন এবং এটি কাজ করে না। : - |

— Houman

@ কেভ আপনি ঠিক বলেছেন, আমি এটিকে সংশোধন করার জন্য উত্তর এবং উত্তরটি পরিবর্তন করেছি। jsfiddle.net/AFffL/177

— Radu Cugut

Just (এটি) .পপওভার ('প্রদর্শন') এর আগে পপওভার ('লুকান') (তাদের সমস্ত আড়াল করার জন্য) কেবল চালনা করবেন না, যা কোনও দৃশ্যমান এবং ক্লিকযুক্তআর ভেরিয়েবলের প্রয়োজনীয়তা সরিয়ে দেয়?

— নাথান হ্যাঙ্গেন

এই সমাধানটি আমাকে কিছু সমস্যা দিয়েছে (খোলা পপওভারের '.পপআপ-মার্কার' উপাদানটিতে ক্লিক করে পপওভারগুলি পরে কাজ করবে না)। আমি আরও একটি সমাধান নিয়ে এসেছি (নীচে পোস্ট করা) যা আমার পক্ষে কাজ করেছে এবং সহজ বলে মনে হচ্ছে (আমি বুটস্ট্র্যাপ ২.৩.১ ব্যবহার করছি)।

— রায়অনআর

Answer 2

এটি আরও সহজ:

$('html').click(function(e) {
    $('.popup-marker').popover('hide');
});

$('.popup-marker').popover({
    html: true,
    trigger: 'manual'
}).click(function(e) {
    $(this).popover('toggle');
    e.stopPropagation();
});

Comments

একমত। এবং কমপক্ষে আমার জন্য, এটি করার সঠিক উপায়। প্রথম বিকল্পটি "দ্রুত সমাধান" বলে মনে হচ্ছে।

— ডেনিস লিন্স

এটি ব্যবহার করতে চেয়েছিলেন তবে কোনও কারণে কার্যকর হয়নি। ক্লিক ইভেন্টগুলি কখনও পৌঁছায় না htmlএর e.stopPropagation();পরিবর্তে আমি এমন কিছু ব্যবহার করি $('.popup-marker').on('show', function(event) { $('.popup-marker').filter(function(index, element) { return element != event.target; }).popover('hide'); });যা কাজটিও খুব ভাল করে তোলে (যদিও পারফরম্যান্সের পার্থক্য রয়েছে কিনা তা জানেন না)

— কর্নেলিস

এটি সেরা উত্তর আইএমও।

— Looooii

@ পবারন এবং @ কর্নেলিস উত্তরগুলির সংকলন সবচেয়ে ভাল কাজ করে। আমি কি জুড়েছেন (ঠিক আগে দ্বিতীয় 'ক্লিক' ফাংশনটি ভিতরে Cornelis কোড $(this).popover('toggle');অংশ তারপর, যদি আপনি একাধিক 'পপআপ-মার্কার' বস্তু থাকে, তবে প্রত্যেকটির ক্লিক অন্যদের বন্ধ করে

— alekwisnia

এর সাথে একটি সমস্যা হ'ল পপওভারটি এখনও রয়েছে, কেবল লুকানো। সুতরাং উদাহরণস্বরূপ, যদি পপওভারে আপনার লিঙ্ক থাকে তবে আপনি আপনার কর্সারটি যেখানে ব্যবহার করতেন সেখানে তা হোভার করতে পারেন এবং এখনও সেই লিঙ্কগুলির উপরে কার্সার পরিবর্তন পেতে পারেন।

— হিমবাহ

Answer 3

আমারও অনুরূপ প্রয়োজন ছিল এবং বুটস্ট্র্যাপএক্স - নামে পরিচিত লি কারমাইকেলের টুইটার বুটস্ট্র্যাপ পপওভারের এই দুর্দান্ত সামান্য এক্সটেনশনটি পেয়েছি । এখানে তার কিছু ব্যবহারের উদাহরণ রয়েছে । মূলত এটি পপওভারটিকে একটি ইন্টারেক্টিভ উপাদানগুলিতে রূপান্তরিত করবে যা আপনি পৃষ্ঠার অন্য কোথাও বা পপওভারের মধ্যে একটি ঘনিষ্ঠ বোতামে ক্লিক করলে বন্ধ হবে। এটি একাধিক পপওভারগুলি একবারে এবং অন্যান্য দুর্দান্ত বৈশিষ্ট্যগুলির একগুচ্ছ খোলার অনুমতি দেবে।

প্লাগিন এখানে পাওয়া যাবে ।

ব্যবহারের উদাহরণ

<button rel="clickover" data-content="Show something here. 
    <button data-dismiss='clickover'
    >Close Clickover</button>"
>Show clickover</button>

জাভাস্ক্রিপ্ট:

// load click overs using 'rel' attribute
$('[rel="clickover"]').clickover();

Comments

এটি সত্যিই দুর্দান্ত। খুব সহজ।

— ডগ

দুর্দান্ত প্লাগইন! লিঙ্কের জন্য ধন্যবাদ।

— ম্যাট উইলসন

এটি কেবল একটি শট দিয়েছে এবং এটি দুর্দান্ত কাজ করে। "পপওভার" থেকে "ক্লিকওভার" তে বিদ্যমান পপওভারের রিলকে পরিবর্তন করার মতোই সহজ ছিল।

— Dmase05

বুটস্ট্র্যাপ v2.3.1 এ চলছে, কোনও সমস্যা নেই।

— কেভিন দেওয়াল্ট

Answer 4

গৃহীত সমাধানটি আমাকে কিছু সমস্যা দিয়েছে (খোলা পপওভারের '.পপআপ-মার্কার' উপাদানটিতে ক্লিক করে পপওভারগুলি পরে কাজ করে না)। আমি এই অন্যান্য সমাধানটি নিয়ে এসেছি যা আমার পক্ষে নিখুঁতভাবে কাজ করে এবং এটি বেশ সহজ (আমি বুটস্ট্র্যাপ ২.৩.১ ব্যবহার করছি):

$('.popup-marker').popover({
    html: true,
    trigger: 'manual'
}).click(function(e) {
    $('.popup-marker').not(this).popover('hide');
    $(this).popover('toggle');
});
$(document).click(function(e) {
    if (!$(e.target).is('.popup-marker, .popover-title, .popover-content')) {
        $('.popup-marker').popover('hide');
    }
});

আপডেট: এই কোডটি বুটস্ট্র্যাপ 3 এর সাথেও কাজ করে!

Comments

এটি একটি দুর্দান্ত সমাধান। ধন্যবাদ.

— গ্যাভিন

ভাল সমাধান। if (!$(e.target).is('.popup-marker') && !$(e.target).parents('.popover').length > 0)এইচটিএমএল বিষয়বস্তু থাকা সত্ত্বেও আপনি কেন

— পপআপটি

বা আরও ভালif (!$(e.target).is('.popup-marker') && $(e.target).closest('.popover').length === 0)

— ফেবডগ্লাস

Answer 5

এখানে "পরবর্তী ক্লিকে বরখাস্ত " পড়ুন http://getbootstrap.com/javascript/#popovers

আপনি পরবর্তী ক্লিকে পপওভারগুলি খারিজ করতে ফোকাস ট্রিগারটি ব্যবহার করতে পারেন, তবে আপনাকে <a>ট্যাগটি নয়, <button>ট্যাগটি ব্যবহার করতে হবে এবং আপনাকে অবশ্যই একটি tabindexবৈশিষ্ট্য অন্তর্ভুক্ত করতে হবে ...

উদাহরণ:

<a href="#" tabindex="0" class="btn btn-lg btn-danger"
  data-toggle="popover" data-trigger="focus" title="Dismissible popover"
  data-content="And here's some amazing content. It's very engaging. Right?">
  Dismissible popover
</a>

Comments

প্রশ্নটিতে বলা হয়েছে যে ক্লিকটি পপওভারে থাকলে এটি খারিজ করতে চান না তিনি। এটি যে কোনও জায়গায় ক্লিক করে এটিকে বরখাস্ত করে।

— ফ্রেড

ডেটা-ট্রিগার = "ফোকাস" যুক্ত করা আমার পপওভারগুলি প্রবর্তন থেকে থামিয়ে দেওয়া পর্যন্ত আমি এই পোস্টটি না পড়ি এবং ট্যাবিনডেক্স বৈশিষ্ট্য যুক্ত না করে। এখন এটা কাজ করছে!

— পিক্সেলগ্রাফ

তথ্যের জন্য, tooltipএটি প্রকৃত নথিতে স্পষ্টভাবে উল্লেখ না করা সত্ত্বেও এটির সাথেও কাজ করে ।

— অ্যালেক্সবি

Answer 6

বিদ্যমান সমস্ত উত্তর মোটামুটি দুর্বল, কারণ তারা সমস্ত নথির ইভেন্টগুলি ক্যাপচার করার পরে সক্রিয় পপওভারগুলি সন্ধান করতে বা কলটিতে সংশোধন করার উপর নির্ভর করে .popover()।

show.bs.popoverডকুমেন্টের শরীরে ইভেন্টগুলি শোনার জন্য আরও ভাল পদ্ধতির পরে সেই অনুযায়ী প্রতিক্রিয়া জানানো। নীচে এমন কোড রয়েছে যা ডকুমেন্টটি ক্লিক করা বা টিপে দেওয়া হলে পপওভারগুলি বন্ধ করে দেবে esc, যখন পপওভারগুলি দেখানো হয় কেবল ইভেন্ট শ্রোতাদের বাধ্যতামূলক:

function closePopoversOnDocumentEvents() {
  var visiblePopovers = [];

  var $body = $("body");

  function hideVisiblePopovers() {
    $.each(visiblePopovers, function() {
      $(this).popover("hide");
    });
  }

  function onBodyClick(event) {
    if (event.isDefaultPrevented())
      return;

    var $target = $(event.target);
    if ($target.data("bs.popover"))
      return;

    if ($target.parents(".popover").length)
      return;

    hideVisiblePopovers();
  }

  function onBodyKeyup(event) {
    if (event.isDefaultPrevented())
      return;

    if (event.keyCode != 27) // esc
      return;

    hideVisiblePopovers();
    event.preventDefault();
  }

  function onPopoverShow(event) {
    if (!visiblePopovers.length) {
      $body.on("click", onBodyClick);
      $body.on("keyup", onBodyKeyup);
    }
    visiblePopovers.push(event.target);
  }

  function onPopoverHide(event) {
    var target = event.target;
    var index = visiblePopovers.indexOf(target);
    if (index > -1) {
      visiblePopovers.splice(index, 1);
    }
    if (visiblePopovers.length == 0) {
      $body.off("click", onBodyClick);
      $body.off("keyup", onBodyKeyup);
    }
  }

  $body.on("show.bs.popover", onPopoverShow);
  $body.on("hide.bs.popover", onPopoverHide);
}

Comments

+1 এটিই সবচেয়ে পরিষ্কার এবং সর্বাধিক এক্সটেনসিবল সমাধান। আপনি যদি ব্যাকবোনটির মতো ফ্রেমওয়ার্কও ব্যবহার করেন তবে এটি কেবল আপনার আরম্ভের কোডে ফেলে দিন এবং এটি পপওভারগুলি পরিচালনা করার যত্ন নেবে।

— জনপি

এই উত্তরটি পারফরম্যান্স উদ্বেগও যুক্ত করে এবং এটি পপওভারের মধ্যে আরও জটিল এইচটিএমএল হ্যান্ডেল করার অনুমতি দেয়।

— রিকার্ডো

দুর্দান্ত সমাধান; এটি সহজেই একটি প্রতিক্রিয়া পদ্ধতিতে ফেলে দিতে সক্ষম হয়েছিল। একটি পরামর্শ, $(event.target).data("bs.popover").inState.click = false;অনপোভারহাইড ফাংশনে যুক্ত করুন যাতে বন্ধ হওয়ার পরে পুনরায় খোলার জন্য আপনার দুবার ক্লিক করতে হবে না।

— sco_tt

আপনি যদি দুটি পপআপের সাহায্যে এটির একটি ঝাঁকুনি তৈরি করতে পারেন তবে কৌতূহল। আমার অ্যাপ্লিকেশনটিতে যখন আমি আপনার কোডটি প্রয়োগ করেছি, আমি পপআপ থেকে পপআপ ক্লিক করতে সক্ষম হয়েছি এবং একাধিক উপস্থিত হয়েছিল, তারপরে 'বডি' ক্লিক করে কেবল প্রদর্শিত শেষটিকে সরিয়ে দেওয়া হয়েছিল।

— টেরি

Answer 7

https://github.com/lecar-red/bootstrapx-clickover

এটি টুইটার বুটস্ট্র্যাপ পপওভারের একটি এক্সটেনশান এবং খুব সহজেই সমস্যাটি সমাধান করবে।

Answer 8

কিছু কারণে এখানের অন্যান্য সমাধানগুলির মধ্যে আমার পক্ষে কাজ হয়নি। যাইহোক, অনেক সমস্যার সমাধানের পরে অবশেষে আমি এই পদ্ধতিতে পৌঁছেছি যা নিখুঁতভাবে কাজ করে (আমার পক্ষে কমপক্ষে)।

$('html').click(function(e) {
  if( !$(e.target).parents().hasClass('popover') ) {
    $('#popover_parent').popover('destroy');
  }
});

আমার ক্ষেত্রে আমি একটি টেবিলটিতে একটি পপওভার যুক্ত করেছিলাম এবং tdক্লিক করা হয়েছে তার উপরে / নীচে একেবারে এটির অবস্থান । সারণি নির্বাচন jQuery-UI নির্বাচনযোগ্য দ্বারা পরিচালিত হয়েছিল তাই আমি নিশ্চিত না যে এটি হস্তক্ষেপ করছে কিনা। তবে আমি যখনই পপওভারের ভিতরে ক্লিক করি তখন আমার ক্লিক হ্যান্ডলারটি লক্ষ্যযুক্ত হয় যা $('.popover')কখনই কাজ করে না এবং ইভেন্ট হ্যান্ডলিং সর্বদা $(html)ক্লিক হ্যান্ডলারের কাছে অর্পিত হয় । আমি জেএসে মোটামুটি নতুন তাই সম্ভবত আমি কিছু হারিয়ে যাচ্ছি?

যাইহোক আমি আশা করি এটি কাউকে সাহায্য করবে!

Comments

বিটিডাব্লু আমি এটির বিষয়ে নিশ্চিত কিনা তা নিশ্চিত নই, তবে আমি বুটস্ট্র্যাপ ২-এর জন্য এই পদ্ধতিটি ব্যবহার করেছি I আমি অনুমান করি এটি বুটস্ট্র্যাপ 3 এর জন্য কাজ করবে, তবে নিশ্চিত হওয়া যায়নি।

— মোল্লাজা

Answer 9

আমি আমার সমস্ত পপওভারকে ক্লাসে নোঙ্গর দিই activate_popover। আমি এগুলি সমস্ত একবারে চালু করে রেখেছি load

$('body').popover({selector: '.activate-popover', html : true, container: 'body'})

আমি ব্যবহার করি ক্লিক এফ কার্যকারিতাটি পেতে (কফি স্ক্রিপ্টে):

$(document).on('click', (e) ->
  clickedOnActivate = ($(e.target).parents().hasClass("activate-popover") || $(e.target).hasClass("activate-popover"))
  clickedAway = !($(e.target).parents().hasClass("popover") || $(e.target).hasClass("popover"))
if clickedAway && !clickedOnActivate
  $(".popover.in").prev().popover('hide')
if clickedOnActivate 
  $(".popover.in").prev().each () ->
    if !$(this).is($(e.target).closest('.activate-popover'))
      $(this).popover('hide')
)

যা বুটস্ট্র্যাপ ২.৩.১ এর সাথে পুরোপুরি সূক্ষ্মভাবে কাজ করে

Comments

এটি আমার পক্ষে কাজ করেছিল, কেবলমাত্র .prev()প্রথম ifধারাটিতে আমাকে মুক্তি দিতে হয়েছিল । আমি বুটস্ট্র্যাপ ৩.২.০.২ ব্যবহার করছি, সম্ভবত কোনও পার্থক্য রয়েছে? এছাড়াও, আপনি ifএকইসাথে একাধিক পপ-আপগুলি খুলতে সক্ষম হতে চাইলে আপনি সম্পূর্ণ দ্বিতীয় ধারাটি ছেড়ে দিতে পারেন। সমস্ত উন্মুক্ত পপওভারগুলি বন্ধ করতে কেবল পপওভার-অ্যাক্টিভেশন-উপাদান নয় (ক্লাস 'অ্যাক্টিভেট-পপওভার') যে কোনও জায়গায় ক্লিক করুন। দুর্দান্ত কাজ!

— অ্যান্ড্রু সুইহার্ট

Answer 10

যদিও এখানে অনেকগুলি সমাধান রয়েছে, আমি আমার প্রস্তাবও দিতে চাই, আমি জানি না যে সেখানে কোনও সমাধান রয়েছে যা এটি সমস্ত সমাধান করে, তবে আমি তাদের মধ্যে তিনটি চেষ্টা করেছিলাম এবং তাদের সমস্যা ছিল যেমন ক্লিক করার মতো পপওভারে এটি নিজে এটি আড়াল করে তোলে, অন্যরা বলে যে আমার কাছে অন্য পপওভার বোতামগুলি ক্লিক করলে / একাধিক পপওভার এখনও উপস্থিত হবে (নির্বাচিত সমাধানের মতো), কীভাবে, এটি সব ঠিক করে দিয়েছে

var curr_popover_btn = null;
// Hide popovers function
function hide_popovers(e)
{
    var container = $(".popover.in");
    if (!container.is(e.target) // if the target of the click isn't the container...
        && container.has(e.target).length === 0) // ... nor a descendant of the container
    {
        if( curr_popover_btn != null )
        {
            $(curr_popover_btn).popover('hide');
            curr_popover_btn = null;
        }
        container.hide();
    }
}
// Hide popovers when out of focus
$('html').click(function(e) {
    hide_popovers(e);
});
$('.popover-marker').popover({
    trigger: 'manual'
}).click(function(e) {
    hide_popovers(e);
    var $popover_btns = $('.popover-marker');
    curr_popover_btn = this;
    var $other_popover_btns = jQuery.grep($($popover_btns), function(popover_btn){
                return ( popover_btn !== curr_popover_btn );
            });
    $($other_popover_btns).popover('hide');
    $(this).popover('toggle');
    e.stopPropagation();
});

Answer 11

আমি সদ্য নির্মিত পপ-ওভারে ফোকাস সেট করব এবং এটি অস্পষ্ট করে ফেলব। এইভাবে ডিওমের কোন উপাদানটি ক্লিক করা হয়েছে এবং পপ-ওভার ক্লিক করা যায়, এবং এটিও নির্বাচন করা যেতে পারে তা খতিয়ে দেখার দরকার নেই: এটি তার ফোকাস হারাবে না এবং অদৃশ্য হবে না।

কোড:

    $('.popup-marker').popover({
       html: true,
       trigger: 'manual'
    }).click(function(e) {
       $(this).popover('toggle');
       // set the focus on the popover itself 
       jQuery(".popover").attr("tabindex",-1).focus();
       e.preventDefault();
    });

    // live event, will delete the popover by clicking any part of the page
    $('body').on('blur','.popover',function(){
       $('.popup-marker').popover('hide');
    });

Answer 12

সমাধানটি আমার পক্ষে খুব ভাল কাজ করেছে, যদি এটি সাহায্য করতে পারে:

/**
* Add the equals method to the jquery objects
*/
$.fn.equals = function(compareTo) {
  if (!compareTo || this.length !== compareTo.length) {
    return false;
  }
  for (var i = 0; i < this.length; ++i) {
    if (this[i] !== compareTo[i]) {
      return false;
    }
  }
  return true;
};

/**
 * Activate popover message for all concerned fields
 */
var popoverOpened = null;
$(function() { 
    $('span.btn').popover();
    $('span.btn').unbind("click");
    $('span.btn').bind("click", function(e) {
        e.stopPropagation();
        if($(this).equals(popoverOpened)) return;
        if(popoverOpened !== null) {
            popoverOpened.popover("hide");            
        }
        $(this).popover('show');
        popoverOpened = $(this);
        e.preventDefault();
    });

    $(document).click(function(e) {
        if(popoverOpened !== null) {
            popoverOpened.popover("hide");   
            popoverOpened = null;
        }        
    });
});

Answer 13

এর সমাধানটির জন্য এখানে আমার সমাধান রয়েছে:

// Listen for clicks or touches on the page
$("html").on("click.popover.data-api touchend.popover.data-api", function(e) {

  // Loop through each popover on the page
  $("[data-toggle=popover]").each(function() {

    // Hide this popover if it's visible and if the user clicked outside of it
    if ($(this).next('div.popover:visible').length && $(".popover").has(e.target).length === 0) {
      $(this).popover("hide");
    }

  });
});

Answer 14

এটি বুটস্ট্র্যাপ ২.৩.২ এ কাজ করতে আমার কিছু সমস্যা হয়েছিল। তবে আমি এটিকে স্লোগান দিয়েছি:

$(function () {
  $(document).mouseup(function (e) {
        if(($('.popover').length > 0) && !$(e.target).hasClass('popInfo')) {
            $('.popover').each(function(){
                $(this).prev('.popInfo').popover('hide');
            });
        }
    });

    $('.popInfo').popover({
        trigger: 'click',
        html: true
    });
});

Answer 15

টুইট করেছেন @ ডেভিড ওয়ালভার সমাধানটি সামান্য:

function closePopoversOnDocumentEvents() {
  var visiblePopovers = [];

  var $body = $("body");

  function hideVisiblePopovers() {
    /* this was giving problems and had a bit of overhead
      $.each(visiblePopovers, function() {
        $(this).popover("hide");
      });
    */
    while (visiblePopovers.length !== 0) {
       $(visiblePopovers.pop()).popover("hide");
    }
  }

  function onBodyClick(event) {
    if (event.isDefaultPrevented())
      return;

    var $target = $(event.target);
    if ($target.data("bs.popover"))
      return;

    if ($target.parents(".popover").length)
      return;

    hideVisiblePopovers();
  }

  function onBodyKeyup(event) {
    if (event.isDefaultPrevented())
      return;

    if (event.keyCode != 27) // esc
      return;

    hideVisiblePopovers();
    event.preventDefault();
  }

  function onPopoverShow(event) {
    if (!visiblePopovers.length) {
      $body.on("click", onBodyClick);
      $body.on("keyup", onBodyKeyup);
    }
    visiblePopovers.push(event.target);
  }

  function onPopoverHide(event) {
    var target = event.target;
    var index = visiblePopovers.indexOf(target);
    if (index > -1) {
      visiblePopovers.splice(index, 1);
    }
    if (visiblePopovers.length == 0) {
      $body.off("click", onBodyClick);
      $body.off("keyup", onBodyKeyup);
    }
  }

  $body.on("show.bs.popover", onPopoverShow);
  $body.on("hide.bs.popover", onPopoverHide);
}

Answer 16

এই প্রশ্নটি এখানেও জিজ্ঞাসা করা হয়েছিল এবং আমার উত্তরটি কেবল jQuery DOM ট্র্যাভারসাল পদ্ধতিগুলি বোঝার উপায় নয় তবে বাইরে ক্লিক করে পপওভারগুলি বন্ধ করার জন্য 2 টি বিকল্প সরবরাহ করে।

একাধিক পপওভার একবারে বা একবারে এক পপওভার খুলুন।

প্লাস এই ছোট কোড স্নিপেটগুলি আইকন সহ বোতামগুলির সমাপ্তি পরিচালনা করতে পারে!

https://stackoverflow.com/a/14857326/1060487

Answer 17

এটি এক কবজির মতো কাজ করে এবং আমি এটি ব্যবহার করি।

এটি ক্লিক করার পরে এটি পপওভারটি খুলবে এবং আপনি আবার ক্লিক করলে এটি বন্ধ হয়ে যাবে, আপনি পপওভারের বাইরে ক্লিক করলে পপওভার বন্ধ হয়ে যাবে।

এটি 1 টিরও বেশি পপওভারের সাথেও কাজ করে।

    function hideAllPopovers(){
    $('[data-toggle="popover"]').each(function() {
        if ($(this).data("showing") == "true"){
            $(this).data("showing", "false");
            $(this).popover('hide');                
        }
    });
}
$('[data-toggle="popover"]').each(function() {
        $(this).popover({
            html: true,
            trigger: 'manual'
        }).click(function(e) {
            if ($(this).data("showing") !=  "true"){
                hideAllPopovers();
                $(this).data("showing", "true");
                $(this).popover('show');
            }else{
                hideAllPopovers();
            }
            e.stopPropagation();
        });
});

$(document).click(function(e) {
    hideAllPopovers();
});

Comments

এটিই আমার পক্ষে কাজ করেছে। বুটস্ট্র্যাপ 3.20। ধন্যবাদ.

— টেলিগ্রাড

Answer 18

আরেকটি সমাধান, এটি পপওভারের বংশধরদের ক্লিক করার সাথে আমার যে সমস্যাটি ছিল তা কভার করেছিল:

$(document).mouseup(function (e) {
    // The target is not popover or popover descendants
    if (!$(".popover").is(e.target) && 0 === $(".popover").has(e.target).length) {
        $("[data-toggle=popover]").popover('hide');
    }
});

Answer 19

আমি নীচের মত এটি না

$("a[rel=popover]").click(function(event){
    if(event.which == 1)
    {   
        $thisPopOver = $(this);
        $thisPopOver.popover('toggle');
        $thisPopOver.parent("li").click(function(event){
            event.stopPropagation();
            $("html").click(function(){
                $thisPopOver.popover('hide');
            });
        });
    }
});

আশাকরি এটা সাহায্য করবে!

Answer 20

আপনি যদি পজ্যাক্সের সাথে টুইটার বুটস্ট্র্যাপ পপওভার ব্যবহার করার চেষ্টা করছেন, এটি আমার পক্ষে কাজ করেছে:

App.Utils.Popover = {

  enableAll: function() {
    $('.pk-popover').popover(
      {
        trigger: 'click',
        html : true,
        container: 'body',
        placement: 'right',
      }
    );
  },

  bindDocumentClickEvent: function(documentObj) {
    $(documentObj).click(function(event) {
      if( !$(event.target).hasClass('pk-popover') ) {
        $('.pk-popover').popover('hide');
      }
    });
  }

};

$(document).on('ready pjax:end', function() {
  App.Utils.Popover.enableAll();
  App.Utils.Popover.bindDocumentClickEvent(this);
});

Answer 21

@ রায়অনএয়ার, আমার পূর্ববর্তী সমাধানগুলির সাথে একই সমস্যা রয়েছে। আমি @ রায়অনএয়ার সমাধানের খুব কাছে এসেছি। অন্য পপওভার মার্কারটিতে ক্লিক করার পরে ইতিমধ্যে চালু হওয়া পপওভারটি বন্ধ হয়ে গেছে One সুতরাং আমার কোডটি হ'ল:

var clicked_popover_marker = null;
var popover_marker = '#pricing i';

$(popover_marker).popover({
  html: true,
  trigger: 'manual'
}).click(function (e) {
  clicked_popover_marker = this;

  $(popover_marker).not(clicked_popover_marker).popover('hide');
  $(clicked_popover_marker).popover('toggle');
});

$(document).click(function (e) {
  if (e.target != clicked_popover_marker) {
    $(popover_marker).popover('hide');
    clicked_popover_marker = null;
  }
});

Answer 22

আমি এটি উপরের পবারনের পরামর্শের একটি পরিবর্তিত সমাধান বলে মনে করেছি, কারণ তার সমাধানটি ক্লাস 'পপআপ-মার্কার' সহ সমস্ত উপাদানগুলিতে পপওভার ('লুকান') সক্রিয় করেছে। যাইহোক, আপনি যখন ডেটা-সামগ্রীর পরিবর্তে এইচটিএমএল সামগ্রীর জন্য পপওভার () ব্যবহার করছেন, যখন আমি নীচে করছি, এইচটিএমএল পপআপের অভ্যন্তরের যে কোনও ক্লিকগুলি আসলে পপওভার ('লুকান') সক্রিয় করে, যা তত্ক্ষণাত উইন্ডোটি বন্ধ করে দেয়। নীচের এই পদ্ধতিটি প্রতিটি। পপআপ-চিহ্নিতকারী উপাদানটির মাধ্যমে পুনরাবৃত্তি করে এবং প্রথমে আবিষ্কার করে যে পিতামাতার সাথে ক্লিক করা। পপআপ-মার্কারের আইডি সম্পর্কিত এবং যদি তাই হয় তবে এটি আড়াল করে না। অন্য সমস্ত ডিভ লুকানো আছে ...

        $(function(){
            $('html').click(function(e) {
                // this is my departure from pbaron's code above
                // $('.popup-marker').popover('hide');
                $('.popup-marker').each(function() {
                    if ($(e.target).parents().children('.popup-marker').attr('id')!=($(this).attr('id'))) {
                        $(this).popover('hide');
                    }
                });
            });

            $('.popup-marker').popover({
                html: true,
                // this is where I'm setting the html for content from a nearby hidden div with id="html-"+clicked_div_id
                content: function() { return $('#html-'+$(this).attr('id')).html(); },
                trigger: 'manual'
            }).click(function(e) {
                $(this).popover('toggle');
                e.stopPropagation();
            });
        });

Answer 23

আমি এটি নিয়ে এসেছি:

আমার দৃশ্যে একই পৃষ্ঠায় আরও পপওভার অন্তর্ভুক্ত ছিল এবং এগুলি লুকিয়ে রেখে কেবল অদৃশ্য করে তোলে এবং এর কারণেই পপওভারের পিছনে থাকা আইটেমগুলিতে ক্লিক করা সম্ভব ছিল না। ধারণাটি হ'ল নির্দিষ্ট পপওভার-লিঙ্কটিকে 'সক্রিয়' হিসাবে চিহ্নিত করুন এবং তারপরে আপনি কেবল সক্রিয় পপওভারটিকে 'টগল' করতে পারবেন। এটি করলে পপওভার সম্পূর্ণ বন্ধ হয়ে যাবে।

$('.popover-link').popover({ html : true, container: 'body' })

$('.popover-link').popover().on 'shown.bs.popover', ->
  $(this).addClass('toggled')

$('.popover-link').popover().on 'hidden.bs.popover', ->
  $(this).removeClass('toggled')

$("body").on "click", (e) ->
  $openedPopoverLink = $(".popover-link.toggled")
  if $openedPopoverLink.has(e.target).length == 0
    $openedPopoverLink.popover "toggle"
    $openedPopoverLink.removeClass "toggled"

Answer 24

আমি একটি সাধারণ সমস্যার সহজ সমাধান করার চেষ্টা করছিলাম। উপরের পোস্টগুলি ভাল তবে একটি সাধারণ সমস্যার জন্য এত জটিল। সুতরাং আমি একটি সহজ জিনিস তৈরি। সবেমাত্র একটি ক্লোজ বোতাম যুক্ত হয়েছে। এটা আমার জন্য নিখুঁত।

            $(".popover-link").click(function(){
                $(".mypopover").hide();
                $(this).parent().find(".mypopover").show();
        })
        $('.close').click(function(){
    $(this).parents('.mypopover').css('display','none');
});



          <div class="popover-content">
        <i class="fa fa-times close"></i>
    <h3 class="popover-title">Title here</h3>
your other content here
        </div>


   .popover-content {
    position:relative;
    }
    .close {
        position:absolute;
        color:#CCC;
        right:5px;
        top:5px;
        cursor:pointer;
    }

Answer 25

আমি এটি পছন্দ করি, সহজ তবে কার্যকর ..

var openPopup;

$('[data-toggle="popover"]').on('click',function(){
    if(openPopup){
        $(openPopup).popover('hide');

    }
    openPopup=this;
});

Answer 26

যোগ btn-popoverআপনার popover বোতাম / লিঙ্কটি popover প্রর্দশিত যে বর্গ। এই কোডটির বাইরে ক্লিক করার সময় পপওভারগুলি বন্ধ করে দেবে।

$('body').on('click', function(event) {
  if (!$(event.target).closest('.btn-popover, .popover').length) {
    $('.popover').popover('hide');
  }
});

Answer 27

একটি আরও সহজ সমাধান, সমস্ত পপওভারগুলির মাধ্যমে কেবল পুনরাবৃত্তি করুন এবং যদি তা না লুকান this।

$(document).on('click', '.popup-marker', function() {
    $(this).popover('toggle')
})

$(document).bind('click touchstart', function(e) {
    var target = $(e.target)[0];
    $('.popup-marker').each(function () {
        // hide any open popovers except for the one we've clicked
        if (!$(this).is(target)) {
            $(this).popover('hide');
        }
    });
});

Answer 28

$('.popForm').popover();

$('.conteneurPopForm').on("click",".fermePopover",function(){
    $(".popForm").trigger("click");
});

পরিষ্কার হতে, কেবল পপওভারটি ট্রিগার করুন

Answer 29

এটি বুটস্ট্র্যাপ 4 এ কাজ করা উচিত:

$("#my-popover-trigger").popover({
  template: '<div class="popover my-popover-content" role="tooltip"><div class="arrow"></div><div class="popover-body"></div></div>',
  trigger: "manual"
})

$(document).click(function(e) {
  if ($(e.target).closest($("#my-popover-trigger")).length > 0) {
    $("#my-popover-trigger").popover("toggle")
  } else if (!$(e.target).closest($(".my-popover-content")).length > 0) {
    $("#my-popover-trigger").popover("hide")
  }
})

ব্যাখ্যা:

• প্রথম বিভাগটি ডকস অনুসারে পপওভারটিকে স্বীকৃতি দেয়: https://getbootstrap.com/docs/4.0/components/popovers/
• দ্বিতীয় বিভাগের প্রথম "যদি" পরীক্ষা করে থাকে যে উপাদানটি # আমার-পপওভার-ট্রিগারটির বংশধর কিনা তা পরীক্ষা করে। যদি এটি সত্য হয় তবে এটি পপওভার টগল করে (এটি ট্রিগারটিতে ক্লিক পরিচালনা করে)।
• দ্বিতীয় বিভাগের দ্বিতীয় "যদি" পরীক্ষা করে যে উপাদানটি পপওভার সামগ্রী সামগ্রীটির বংশধর যা ডিআর টেমপ্লেটে সংজ্ঞায়িত হয়েছিল তা পরীক্ষা করে। যদি এটি না হয় তবে এর মানে হল যে ক্লিকটি পপওভার সামগ্রীর ভিতরে ছিল না এবং পপওভারটি লুকানো যেতে পারে।

Comments

আপনি কি আপনার কোডটি বিস্তারিতভাবে বলতে পারেন? আপনি যা করছেন তার কিছু ব্যাখ্যা যুক্ত করবেন?

— ডেথ ওয়াল্টজ

@ ডেথওয়াল্টজ আমি উত্তরে কেবল ব্যাখ্যাটি যুক্ত করেছি।

— বার্ট ব্লাস্ট

Answer 30

data-trigger="focus"পরিবর্তে চেষ্টা করুন "click"।

এটি আমার জন্য সমস্যার সমাধান।