কীভাবে বাইরে ক্লিক করে একটি টুইটার বুটস্ট্র্যাপ পপওভার বরখাস্ত করবেন?


289

আমরা কী পপওভারগুলিকে মডেলগুলির মতো একইভাবে খারিজযোগ্য হতে পারি? ব্যবহারকারীরা তাদের বাইরে কোথাও ক্লিক করলে তাদের নিকটবর্তী করবেন?

দুর্ভাগ্যক্রমে আমি পপওভারের পরিবর্তে সত্যিকারের মডেলটি ব্যবহার করতে পারি না, কারণ মডেলের অর্থ অবস্থান: স্থির এবং এটি আর পপওভার হবে না। :(


3
একই প্রশ্ন: stackoverflow.com/q/8947749/1478467
Sherbrow

এই স্ট্যাকওভারফ্লো . com/a/40661543/5823517 ব্যবহার করে দেখুন । পিতামাতার মাধ্যমে লুপিংয়ের সাথে জড়িত নয়
টুন

data-trigger="hover"এবং data-trigger="focus"পপওভার বন্ধ করার জন্য অন্তর্নির্মিত বিকল্প, যদি আপনি টগল ব্যবহার করতে না চান। আমার মতে, data-trigger="hover"সেরা ব্যবহারকারীর অভিজ্ঞতা প্রদান করে ... অতিরিক্ত .js কোড লেখার দরকার নেই ...
হুমান বাহরাইন

উত্তর:


461

আপডেট: কিছুটা আরও দৃust় সমাধান: http://jsfiddle.net/mattdlockyer/C5GBU/72/

কেবল পাঠ্যযুক্ত বোতামগুলির জন্য:

$('body').on('click', function (e) {
    //did not click a popover toggle or popover
    if ($(e.target).data('toggle') !== 'popover'
        && $(e.target).parents('.popover.in').length === 0) { 
        $('[data-toggle="popover"]').popover('hide');
    }
});

আইকনযুক্ত বোতামগুলির জন্য (এই কোডটির বুটস্ট্র্যাপ ৩.৩..6 এ একটি বাগ রয়েছে, এই উত্তরের নীচের সমাধানটি দেখুন)

$('body').on('click', function (e) {
        //did not click a popover toggle, or icon in popover toggle, or popover
        if ($(e.target).data('toggle') !== 'popover'
            && $(e.target).parents('[data-toggle="popover"]').length === 0
            && $(e.target).parents('.popover.in').length === 0) { 
            $('[data-toggle="popover"]').popover('hide');
        }
    });

জেএস উত্পাদিত পপওভারের'[data-original-title]' জায়গায় ব্যবহার করুন'[data-toggle="popover"]'

ক্যাভেট: উপরের সমাধানটি একাধিক পপওভারগুলি একবারে খোলার অনুমতি দেয়।

একবারে একটি পপওভার দয়া করে:

আপডেট: বুটস্ট্র্যাপ 3.0.০.x, কোড বা ফিডাল দেখুন http://jsfiddle.net/mattdlockyer/C5GBU/2/

$('body').on('click', function (e) {
    $('[data-toggle="popover"]').each(function () {
        //the 'is' for buttons that trigger popups
        //the 'has' for icons within a button that triggers a popup
        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
            $(this).popover('hide');
        }
    });
});

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


আপডেট: বুটস্ট্র্যাপ ৩.৩..6, মিতাল দেখুন

বন্ধ করার পরে স্থির সমস্যাগুলি পুনরায় খোলার জন্য 2 টি ক্লিক নেয়

$(document).on('click', function (e) {
    $('[data-toggle="popover"],[data-original-title]').each(function () {
        //the 'is' for buttons that trigger popups
        //the 'has' for icons within a button that triggers a popup
        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {                
            (($(this).popover('hide').data('bs.popover')||{}).inState||{}).click = false  // fix for BS 3.3.6
        }

    });
});

আপডেট: পূর্ববর্তী উন্নতির শর্তসাপেক্ষ ব্যবহার করে, এই সমাধানটি অর্জন করা হয়েছিল। ডাবল ক্লিক এবং ভূত পপওভারের সমস্যাটি ঠিক করুন:

$(document).on("shown.bs.popover",'[data-toggle="popover"]', function(){
    $(this).attr('someattr','1');
});
$(document).on("hidden.bs.popover",'[data-toggle="popover"]', function(){
    $(this).attr('someattr','0');
});
$(document).on('click', function (e) {
    $('[data-toggle="popover"],[data-original-title]').each(function () {
        //the 'is' for buttons that trigger popups
        //the 'has' for icons within a button that triggers a popup
        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
            if($(this).attr('someattr')=="1"){
                $(this).popover("toggle");
            }
        }
    });
});

2
আমি কখনও কখনও পুরো পৃষ্ঠাটি প্রসারিত না করে এর $(document)পরিবর্তে সংযুক্ত করি । $('body')body
যাসপ

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

6
পরিবর্তে '[data-toggle="popover"]', যা জাভাস্ক্রিপ্ট উত্পন্ন পপওভারগুলির সাথে কাজ করে না, আমি '[data-original-title]'নির্বাচক হিসাবে ব্যবহার করেছি ।
নাথান

4
কেউ কি জানেন যে এই সমাধানটি বুটস্ট্র্যাপের সর্বশেষতম সংস্করণে কাজ করে না? নিম্নলিখিতটি ঘটছে: পপওভারটি দেখানোর জন্য বোতামটি ক্লিক করুন, তারপরে পপওভারকে খারিজ করতে বডি ক্লিক করুন, তারপরে পপওভার প্রদর্শন করতে বোতামটি ক্লিক করুন এবং পপওভার প্রদর্শিত হবে না। এটি একবারে ব্যর্থ হওয়ার পরে আপনি যদি আবার ক্লিক করেন তবে এটি দেখায়। এটা খুব আজব।
JTunney

3
@ জটুনি আমি বিএস ৩.৩..6 চালাচ্ছি এবং এখনও সেই আচরণটি দেখছি যেখানে এটির বরখাস্ত করার পরে পপোভার খোলার জন্য দুটি ক্লিকের প্রয়োজন।
sersun

65
$('html').on('mouseup', function(e) {
    if(!$(e.target).closest('.popover').length) {
        $('.popover').each(function(){
            $(this.previousSibling).popover('hide');
        });
    }
});

আপনি যদি পপওভার ব্যতীত অন্য কোথাও ক্লিক করেন তবে এটি সমস্ত পপওভারগুলি বন্ধ করে দেয়

বুটস্ট্র্যাপ 4.1 এর জন্য আপডেট

$("html").on("mouseup", function (e) {
    var l = $(e.target);
    if (l[0].className.indexOf("popover") == -1) {
        $(".popover").each(function () {
            $(this).popover("hide");
        });
    }
});

আমি বোতামে একটি ক্লাস যুক্ত করেছি যা পপওভার (পপ-বিটিএন) কে ট্রিগার করে তাই এটি অন্তর্ভুক্ত করা হয় না ... যদি (! $ (E.target)। ক্লোজস্ট ('। পপওভার')। দৈর্ঘ্য &&! $ (E। টার্গেট)। ক্লোজস্ট ('। বিটিএন')। হ্যাশ ক্লাস ('পপ-বিটিএন'))
মোজগ্রাস

2
3 পপওভার বোতামের সাহায্যে এই কোডটি সমস্যা তৈরি করে। কিছু ক্ষেত্রে আমি বোতামটি ক্লিক করতে পারি না এবং বোতামগুলি ফ্লাশ হয়।
ওপেনকোড

1
এই কোডটি কাজ করতে পারে না ... এই ফিডলটি দেখুন এবং দয়া করে আপনার উত্তরে একটি ফিডল যুক্ত করুন। jsfiddle.net/C5GBU/102
mattdlockyer

আমার জন্য একদম সঠিক. আমার "বাইরের ক্লিক" যখন একটি নতুন পপওভার খোলার ঘটনা ঘটল তখন অন্যান্য উত্তরগুলির পার্শ্ব-প্রতিক্রিয়া ছিল।
ফ্যাসিও অনুপাত 21

এটি দুর্দান্ত কাজ করে তবে এটিকে খাপ খাইয়ে নেওয়ার একটি উপায় থাকা দরকার যাতে আপনি পপওভারের সামগ্রীতে ক্লিক করলে এটি বন্ধ না হয়। উদাহরণস্বরূপ, যদি আপনি পপওভারের ভিতরে <b> ট্যাগের অভ্যন্তরে পাঠ্যে ক্লিক করেন ...
সি এ বেন

39

সর্বাধিক সহজ, সবচেয়ে ব্যর্থ নিরাপদ সংস্করণ , যে কোনও বুটস্ট্র্যাপ সংস্করণে কাজ করে।

ডেমো: http://jsfiddle.net/guya/24mmM/

ডেমো 2: পপওভার সামগ্রীর ভিতরে ক্লিক করার সময় বরখাস্ত করা হচ্ছে না http://jsfiddle.net/guya/fjZja/

ডেমো 3: একাধিক পপওভার: http://jsfiddle.net/guya/6YCjW/


কেবল এই লাইনে কল করলে সমস্ত পপওভারগুলি বরখাস্ত হবে:

$('[data-original-title]').popover('hide');

এই কোডটি দিয়ে বাইরে ক্লিক করার সময় সমস্ত পপওভারগুলি খারিজ করুন:

$('html').on('click', function(e) {
  if (typeof $(e.target).data('original-title') == 'undefined') {
    $('[data-original-title]').popover('hide');
  }
});

উপরের স্নিপেট শরীরে একটি ক্লিক ইভেন্ট সংযুক্ত করে। ব্যবহারকারী যখন পপওভারে ক্লিক করেন, তখন এটি স্বাভাবিক হিসাবে আচরণ করবে। ব্যবহারকারী যখন পপওভার নয় এমন কিছুতে ক্লিক করে তা সমস্ত পপওভারগুলি বন্ধ করে দেবে।

এটি জাভাস্ক্রিপ্ট দিয়ে শুরু করা পপওভারগুলির সাথেও কাজ করবে, অন্য কিছু উদাহরণগুলির বিপরীতে যা কাজ করবে না। (ডেমো দেখুন)

আপনি যদি পপওভার সামগ্রীর ভিতরে ক্লিক করার সময় বরখাস্ত করতে চান না, এই কোডটি ব্যবহার করুন (২ য় ডেমোর লিঙ্কটি দেখুন):

$('html').on('click', function(e) {
  if (typeof $(e.target).data('original-title') == 'undefined' && !$(e.target).parents().is('.popover.in')) {
    $('[data-original-title]').popover('hide');
  }
});

3
একই সমস্যা ছিল এবং এটি বুটস্ট্র্যাপ 3 এ কাজ করেছে
wsams

আপনি যদি পপওভারগুলি এমনভাবে আনেন যে পপওভারগুলি ওভারল্যাপ হয়ে যায়, যখন আপনি বাইরে কোথাও ক্লিক করে কোনও পপওভার লুকিয়ে রাখেন, লিঙ্কগুলির মধ্যে একটির কাজ বন্ধ হয়ে যায়। চেক করুন: jsfiddle.net/qjcuyksb/1
সন্দীপ গিরি

1
পপওভারে বুটস্ট্র্যাপ-ডেটপিকার ব্যবহার করার সময় শেষ সংস্করণটি কাজ করে না।
dbinott

1
আমি এই সমাধানটি সবচেয়ে ভাল পছন্দ করেছি, কারণ গৃহীত উত্তরগুলি 30 বা তার বেশি পপআপগুলির সাথে কিছুটা রিসোর্স হগ হতে শুরু করেছিল
ডেভিড জি

1
সম্ভবত !$(e.target).closest('.popover.in').lengthতুলনায় আরও দক্ষ হবে !$(e.target).parents().is('.popover.in')
জোয়েটউইডল

19

বুটস্ট্র্যাপ ২.৩.২ দিয়ে আপনি ট্রিগারটিকে 'ফোকাস' এ সেট করতে পারেন এবং এটি কেবল কাজ করে:

$('#el').popover({trigger:'focus'});

1
+1, তবে গুরুত্বপূর্ণ দিক নোট: যদি আপনি বোতাম বা অ্যাঙ্করটিতে আবার ক্লিক করেন তবে গ্রহণযোগ্য উত্তরটি দেয় তবে এটি পপওভারটি বন্ধ করে না।
খ্রিস্টান গোলহার্ড

18

এটি মূলত খুব জটিল নয়, তবে সমস্যাগুলি এড়াতে কিছু পরীক্ষা করার দরকার রয়েছে।

ডেমো (jsfiddle)

var $poped = $('someselector');

// Trigger for the popover
$poped.each(function() {
    var $this = $(this);
    $this.on('hover',function() {
            var popover = $this.data('popover');
            var shown = popover && popover.tip().is(':visible');
            if(shown) return;        // Avoids flashing
            $this.popover('show');
    });
});

// Trigger for the hiding
 $('html').on('click.popover.data-api',function() {
    $poped.popover('hide');
});

2
এটি বাইরের নয় সর্বত্র ক্লিক করে
মডেলটিকে

popover()হোভারের পরিবর্তে ক্লিকের মাধ্যমে এটি করা কি সম্ভব ?
জাকি আজিজ

3
অবশ্যই, তবে আপনাকে stopPropagation()ক্লিক হ্যান্ডলারের কাছে দেওয়া ইভেন্টটি কল করতে হবে (যদি না হয় তবে লুকানো হ্যান্ডলারটি অবিলম্বে পপওভারটি আড়াল করে)। ডেমো (জসফিডাল)
শেরব্রো

আমি খুব কম কোডে নীচে একই কার্যকারিতা পেয়েছি। এই উত্তরটি ফুলে উঠেছে এবং এই প্রশ্নের জন্য কিছুটা হাস্যকর ... তিনি যখন চান বাইরে বাইরে ক্লিক করার সময় পপওভারগুলি বন্ধ করা তিনি চান ... এটি ওভারকিল এবং UGLY!
mattdlockyer

2
সংশোধন, আমি বিশ্বাস করি আমার কাছে আরও কম কোডে আরও ভাল কার্যকারিতা রয়েছে। এটি ধরে নিয়েছে যে আপনি একবারে একটি পপআপ দৃশ্যমান হতে চান। : আপনি ভালো দয়া করে নীচের আমার উত্তর ভোট দিন তাহলে jsfiddle.net/P3qRK/1 : উত্তর stackoverflow.com/a/14857326/1060487
mattdlockyer

16

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

সুতরাং আমি এটিকে কিছুটা সংশোধন করেছি:

$(document).on('click', function (e) {
    var
        $popover,
        $target = $(e.target);

    //do nothing if there was a click on popover content
    if ($target.hasClass('popover') || $target.closest('.popover').length) {
        return;
    }

    $('[data-toggle="popover"]').each(function () {
        $popover = $(this);

        if (!$popover.is(e.target) &&
            $popover.has(e.target).length === 0 &&
            $('.popover').has(e.target).length === 0)
        {
            $popover.popover('hide');
        } else {
            //fixes issue described above
            $popover.popover('toggle');
        }
    });
})

1
ভাল লাগছে, এটা আমার জন্য কাজ করছে। বিটিডব্লিউ আপনি ভুলে গেছেন একটি); সর্বশেষ} এর পরে আপনার কোডের শেষে
মার্লিন

1
দ্বিতীয় ক্লিকের সাথে সম্পর্কিত একই সমস্যা ছিল। এই উত্তর ব্যর্থ হওয়া উচিত!
ফিলিপ লিওও

আমি উপরের পূর্ববর্তী সমাধানগুলিও চেষ্টা করেছিলাম, তবে যারা 2016 সালের মতো সমাধানও সন্ধান করছে তাদের জন্য গাইডেন্স হিসাবে, এটি আরও ভাল সমাধান।
দিরির

শীর্ষ উত্তর, বিজ্ঞাপন হিসাবে কাজ করে। হিসাবে উল্লিখিত, অন্যদের না। এটি শীর্ষ জবাবটি হওয়া উচিত
দুগ্গি

আমি ডেটা-টগেল = "পপওভার" ব্যবহার না করেই পুরোপুরি কাজ করে। তবে আপনি যে কোনও নির্বাচক নির্দিষ্ট করতে পারেন যা আপনার পপওভার ট্রিগার উপাদানগুলির সাথে মেলে। দুর্দান্ত সমাধান এবং একমাত্র আমার জন্য দুটি ক্লিকের সমস্যা সমাধান করেছে।
shock_gone_wild

11

কীভাবে এটি করবেন তা দেখানোর জন্য আমি একটি জিসফিল তৈরি করেছি:

http://jsfiddle.net/3yHTH/

ধারণাটি হ'ল আপনি বোতামটি ক্লিক করার সময় পপওভারটি দেখানো এবং বোতামের বাইরে ক্লিক করার পরে পপওভারটি লুকানো।

এইচটিএমএল

<a id="button" href="#" class="btn btn-danger">Click for popover</a>

জাতীয়

$('#button').popover({
    trigger: 'manual',
    position: 'bottom',
    title: 'Example',
    content: 'Popover example for SO'
}).click(function(evt) {
    evt.stopPropagation();
    $(this).popover('show');
});

$('html').click(function() {
    $('#button').popover('hide');
});

সুন্দর ডেমো আমি ভাবছি আপনি কীভাবে পিকআপকে জ্যাকারি অবজেক্টে কল করতে পারবেন, পপওভারটি একটি বুটস্ট্র্যাপ জেএস প্লাগইন, তবে আপনি সেখানে কোনও বুটস্ট্র্যাপ জেএস ফাইল অন্তর্ভুক্ত করবেন না?
বিঙ্গজি 2680

জেসফিডেলে একটি জেএস ফাইল রয়েছে। বাম কলামটি দেখুন -> সংস্থানগুলি পরিচালনা করুন।
পিগুইরেস

ঠিক আছে, আমি দেখতে পাচ্ছি যে একটি বুটস্ট্র্যাপ জেএস আছে। কিন্তু এটি চেক করা হয় না, এটি এখনও কাজ করে?
বিঙ্গজি 2680

হ্যাঁ এটা কাজ করে. যাইহোক, আমি গুগলে অনুসন্ধান করেছি: jsfiddle bootstrapএবং এটি আমাকে jsfizz এ CSS + js এর কঙ্কাল দিয়েছে।
পিগুইরেস

2
এটির সাথে আমার একমাত্র সমস্যা হ'ল আপনি যখন পপওভারটি ক্লিক করেন তখন এটি লুকান। পাশাপাশি কেবল একটি টুলটিপ ব্যবহার করুন।
NoBrainer

6

উপাদানটির সাথে এই বৈশিষ্ট্যটি কেবল যুক্ত করুন

data-trigger="focus"

প্রাথমিকভাবে বুটস্ট্র্যাপ ৩.৩..7 নিয়ে এটি আমার পক্ষে কার্যকর হয়নি তবে তারপরে আমি ডক্সটি পড়েছি এবং তাদের কিছু গাইডেন্স রয়েছে যা এখানে উল্লেখ করার মতো। দস্তাবেজের অস্বীকারযোগ্য পপওভার উদাহরণ থেকে "সঠিক ক্রস-ব্রাউজার এবং ক্রস-প্ল্যাটফর্ম আচরণের জন্য, আপনাকে <a> ট্যাগ ব্যবহার করতে হবে, <বাটন> ট্যাগ নয় এবং আপনাকে অবশ্যই ভূমিকা =" বাটন "এবং ট্যাবিনডেক্স বৈশিষ্ট্যগুলি অন্তর্ভুক্ত করতে হবে । "
জেফ

3

এটি এখানে আগে জিজ্ঞাসা করা হয়েছে । তারপরে আমি যে একই উত্তর দিয়েছিলাম তা এখনও প্রযোজ্য:

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


3

পার্টিতে এটি দেরি হয়ে গেছে ... তবে আমি ভেবেছিলাম এটি ভাগ করে নিই। আমি পপওভারটি পছন্দ করি তবে এতে বিল্ট-ইন কার্যকারিতা খুব কম। আমি একটি বুটস্ট্র্যাপ এক্সটেনশন লিখেছি। বুদবুদ () যা আমি চাই পপওভার হতে চাই। বরখাস্ত করার চারটি উপায়। বাইরে ক্লিক করুন, লিঙ্কটি টগল করুন, এক্স ক্লিক করুন, এবং পালাতে চাপুন।

এটি স্বয়ংক্রিয়ভাবে অবস্থান করে তাই এটি পৃষ্ঠায় কখনও যায় না।

https://github.com/Itumac/bootstrap-bubble

এটি একটি কৃত্রিম স্ব-প্রচার নয় ... আমি আমার জীবনের বহুবার অন্য ব্যক্তির কোড ধরেছি, আমি নিজের প্রচেষ্টাটির প্রস্তাব দিতে চেয়েছিলাম। এটিকে ঘূর্ণি দিন এবং দেখুন এটি আপনার পক্ষে কাজ করে কিনা।


3

Http://getbootstrap.com/ javascript/ # popovers অনুসারে ,

<button type="button" class="popover-dismiss" data-toggle="popover" title="Dismissible popover" data-content="Popover Content">Dismissible popover</button>

ব্যবহারকারীরা পরবর্তী ক্লিকগুলিতে পপওভারগুলি খারিজ করতে ফোকাস ট্রিগার ব্যবহার করুন।

$('.popover-dismiss').popover({
    trigger: 'focus'
})

2
ওএস এক্স নেটিভ আচরণ অনুসরণ করে এমন ম্যাক ব্রাউজারগুলিতে কাজ করে না (এটি ক্লিকে ফোকাস দেয় না বা বোতামগুলি ঝাপসা করে না)। এর মধ্যে রয়েছে ফায়ারফক্স এবং সাফারি। বুটস্ট্র্যাপ ছেলেরা এখানে একটি বড় ভুল করেছে, কারণ এই পপওভারগুলি খোলার পক্ষেও না, খালি খারিজ করা যাক।
এন্টে ভ্রালি

2
@ আন্টিভ্রালি সম্ভবত আপনার মন্তব্যটি লেখার সময় ডকুমেন্টেশনে এখনও ছিল না তবে এখন ডক্স বলছে: "ক্রস-ব্রাউজার এবং ক্রস প্ল্যাটফর্মের যথাযথ আচরণের জন্য আপনাকে <a>ট্যাগটি ব্যবহার করতে হবে, ট্যাগটি নয় <button>, আপনাকে অবশ্যই অবশ্যই অন্তর্ভুক্ত করতে হবে role="button"এবং tabindexবৈশিষ্ট্যাবলী। " আপনি কি এই স্পেসিফিকেশন দিয়ে চেষ্টা করে?
লুই

3
ওয়েল, সেখানে হয় একটি মাউস বোতাম টিপে: এই উত্তর, যা প্ল্যাটফর্ম এর সঙ্গে সামঞ্জস্যপূর্ণ কিছুই করার আছে একটি সমস্যা ভিতরে একটি popover popover বরখাস্ত কারণ উপাদান যে popover আরম্ভ করে ফোকাস নষ্ট হয়ে যাবে হবে। ব্যবহারকারীরা পপওভারগুলি থেকে অনুলিপি এবং পেস্ট করতে সক্ষম হবেন ভুলে যান: মাউস বোতামটি নিচে যাওয়ার সাথে সাথে পপওভারটি বন্ধ হয়ে যায়। যদি পপওভারে আপনার ক্রিয়াযোগ্য আইটেম থাকে (বোতামগুলি, লিঙ্কগুলি), ব্যবহারকারীরা সেগুলি ব্যবহার করতে সক্ষম হবেন না।
লুই

'ক্রস প্ল্যাটফর্মের' জন্য এতটাই কারণ বুটস্ট্র্যাপে .0.০.০-বিটা এবং .0.০.০-বিটা ২. আমি ক্রোমে ম্যাক এ কাজ করতে পারি না :(
rmcsharry

3

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

$('body').on('click', function (e) {
    $('[data-original-title]').each(function () {
        //the 'is' for buttons that trigger popups
        //the 'has' for icons within a button that triggers a popup
        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
            var popoverElement = $(this).data('bs.popover').tip();
            var popoverWasVisible = popoverElement.is(':visible');

            if (popoverWasVisible) {
                $(this).popover('hide');
                $(this).click(); // double clicking required to reshow the popover if it was open, so perform one click now
            }
        }
    });
});


3

এই সমাধানটি সূক্ষ্মভাবে কাজ করে:

$("body")   .on('click'     ,'[data-toggle="popover"]', function(e) { 
    e.stopPropagation();
});

$("body")   .on('click'     ,'.popover' , function(e) { 
     e.stopPropagation();
});

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

2
jQuery("#menu").click(function(){ return false; });
jQuery(document).one("click", function() { jQuery("#menu").fadeOut(); });

2

আপনি ডিওএম থেকে পপআপ অপসারণ করতে ইভেন্ট বুদবুদ ব্যবহার করতে পারেন। এটি কিছুটা নোংরা, তবে এটি কাজ করে।

$('body').on('click touchstart', '.popover-close', function(e) {
  return $(this).parents('.popover').remove();
});

আপনার এইচটিএমএলে পপওভারের অভ্যন্তরের সামগ্রীতে .popover- ক্লাসটি যুক্ত করুন যা পপওভারটি বন্ধ করা উচিত।


2

আপনি নির্বাচক প্রতিনিধিদের সাথে পপওভার তৈরি করলে 'হাইড' পদ্ধতিটি কাজ করে না বলে মনে হচ্ছে পরিবর্তে 'ধ্বংস' ব্যবহার করা উচিত।

আমি এটির মতো কাজ করেছিলাম:

$('body').popover({
    selector: '[data-toggle="popover"]'
});

$('body').on('click', function (e) {
    $('[data-toggle="popover"]').each(function () {
        //the 'is' for buttons that trigger popups
        //the 'has' for icons within a button that triggers a popup
        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
            $(this).popover('destroy');
        }
    });
});

জেএসফিডাল এখানে


2

@ ম্যাটডলকায়ার (সমাধানের জন্য ধন্যবাদ!) এর সমাধান নিয়ে আমাদের একটি সমস্যা রয়েছে তা আমরা খুঁজে পেয়েছি। এই জাতীয় পপওভার কনস্ট্রাক্টরের জন্য নির্বাচক সম্পত্তি ব্যবহার করার সময় ...

$(document.body').popover({selector: '[data-toggle=popover]'});

... BS3 এর প্রস্তাবিত সমাধান কাজ করবে না। পরিবর্তে এটি তার দ্বিতীয় স্থানীয় পপওভার দৃষ্টান্ত তৈরি করে $(this)। এটি রোধ করার জন্য আমাদের সমাধান এখানে:

$(document.body).on('click', function (e) {
    $('[data-toggle="popover"]').each(function () {
        //the 'is' for buttons that trigger popups
        //the 'has' for icons within a button that triggers a popup
        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
            var bsPopover = $(this).data('bs.popover'); // Here's where the magic happens
            if (bsPopover) bsPopover.hide();
        }
    });
});

উল্লিখিত হিসাবে $(this).popover('hide');ডেলিগ্রেড শ্রোতার কারণে দ্বিতীয়টি তৈরি করবে। প্রদত্ত সমাধানটি কেবল পপওভারগুলি লুকায় যা ইতিমধ্যে তাত্ক্ষণিকভাবে রয়েছে।

আমি আশা করি আমি আপনাকে কিছু সময় বাঁচাতে পারতাম।


2

বুটস্ট্র্যাপ স্থানীয়ভাবে এটি সমর্থন করে :

জেএস বিন ডেমো

পরের-ক্লিককে বরখাস্ত করার জন্য নির্দিষ্ট মার্কআপের প্রয়োজন

সঠিক ক্রস ব্রাউজার এবং ক্রস-প্ল্যাটফর্ম আচরণের জন্য, আপনি ব্যবহার করা আবশ্যক <a>ট্যাগ, না<button> ট্যাগ, এবং আপনি অন্তর্ভুক্ত করা আবশ্যক role="button"এবং tabindexবৈশিষ্ট্যাবলী।


বুটস্ট্র্যাপে .0.০.০-বিটা এবং .0.০.০-বিটা ২. আমি ক্রোমে ম্যাকের জন্য এটি কাজ করতে পারি না :(
আরএমসিচারি

যে কোনও জায়গায় ক্লিক করলে এই পপওভারটি বন্ধ হয়ে যায়, প্রশ্নকর্তাকে "পপওভারের বাইরে ক্লিক করুন এটি বন্ধ করে" দরকার, যা আলাদা।
ফিল্ম

2

এই সমাধানটি দ্বিতীয়বারের মতো পপওভার দেখানোর সময় সমস্যাগুলি থেকে মুক্ত হয়ে যায় 2nd

বুটস্ট্র্যাপ v3.3.7 দিয়ে পরীক্ষা করা হয়েছে

$('body').on('click', function (e) {
    $('.popover').each(function () {
        var popover = $(this).data('bs.popover');
        if (!popover.$element.is(e.target)) {
            popover.inState.click = false;
            popover.hide();                
        }
    });
});

2

আমি পূর্ববর্তী উত্তরগুলির অনেকগুলি চেষ্টা করেছি, সত্যই কিছুই আমার পক্ষে কাজ করে না তবে এই সমাধানটি করেছে:

https://getbootstrap.com/docs/3.3/javascript/#dismiss-on-next-click

তারা অ্যাঙ্কর ট্যাগ নট বাটন ব্যবহার করার পরামর্শ দেয় এবং ভূমিকা = "বাটন" + ডেটা-ট্রিগার = "ফোকাস" + ট্যাবিনডেক্স = "0" বৈশিষ্ট্যগুলি যত্ন নেওয়ার পরামর্শ দেয়।

উদা:

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" 
data-trigger="focus" title="Dismissible popover" data-content="amazing content">
Dismissible popover</a>

: খুব এই রেফারেন্স চেষ্টা stackoverflow.com/questions/20466903/...
আহমেদ এল Damasy

1

আমি এটি নিয়ে এসেছি: আমার দৃশ্যে একই পৃষ্ঠায় আরও পপওভার অন্তর্ভুক্ত ছিল এবং এগুলি লুকানো কেবল তাদের অদৃশ্য করে তোলে এবং এজন্য, পপওভারের পিছনে আইটেমগুলিতে ক্লিক করা সম্ভব ছিল না। ধারণাটি হ'ল নির্দিষ্ট পপওভার-লিঙ্কটিকে 'সক্রিয়' হিসাবে চিহ্নিত করুন এবং তারপরে আপনি কেবল সক্রিয় পপওভারটিকে 'টগল' করতে পারবেন। এটি করলে পপওভার সম্পূর্ণভাবে বন্ধ হয়ে যাবে $ ('। পপওভার-লিংক')। পপওভার ({এইচটিএমএল: সত্য, ধারক: 'বডি'})

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

1

নতুন পপওভারটি দেখানোর আগে আমি অন্যান্য সক্রিয় পপওভারগুলি সরিয়েছি (বুটস্ট্র্যাপ 3):

$(".my-popover").popover();

$(".my-popover").on('show.bs.popover',function () {
    $('.popover.in').remove();
});              

1

3.3.6 এবং দ্বিতীয় ক্লিকের সাথে পরীক্ষা করা ঠিক আছে

        $('[data-toggle="popover"]').popover()
            .click(function () {
            $(this).popover('toggle');
        });;

        $(document).on('click', function (e) {
            $('[data-toggle="popover"]').each(function () {
                //the 'is' for buttons that trigger popups
                //the 'has' for icons within a button that triggers a popup
                if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
                    $(this).popover('hide');
                }
            });
        });

0

ডেমো: http://jsfiddle.net/nessajtr/yxpM5/1/

var clickOver = clickOver || {};
clickOver.uniqueId = $.now();

clickOver.ClickOver = function (selector, options) {
    var self = this;

    //default values
    var isVisible, clickedAway = false;

    var callbackMethod = options.content;
var uniqueDiv = document.createElement("div");
var divId = uniqueDiv.id = ++clickOver.uniqueId;
uniqueDiv.innerHTML = options.loadingContent();

options.trigger = 'manual';
options.animation = false;
options.content = uniqueDiv;

self.onClose = function () {
    $("#" + divId).html(options.loadingContent());
    $(selector).popover('hide')
    isVisible = clickedAway = false;
};
self.onCallback = function (result) {
    $("#" + divId).html(result);
};

$(selector).popover(options);

//events
$(selector).bind("click", function (e) {
    $(selector).filter(function (f) {
        return $(selector)[f] != e.target;
    }).popover('hide');

    $(selector).popover("show");
    callbackMethod(self.onCallback);

    isVisible = !(clickedAway = false);
});

$(document).bind("click", function (e) {
    if (isVisible && clickedAway && $(e.target).parents(".popover").length == 0) {
        self.onClose();
        isVisible = clickedAway = false;
    } else clickedAway = true;
});

}

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


0

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

$('.clickable').popover({
 trigger: 'manual',
 animation: false
 }).click (evt) ->
  $('.clickable').popover('hide')
  evt.stopPropagation()
  $(this).popover('show')

$('html').on 'click', (evt) ->
  $('.clickable').popover('hide')

0

ঠিক আছে স্ট্যাকওভারফ্লোতে কিছু উত্তর দেওয়ার জন্য এটি আমার প্রথম প্রচেষ্টা তাই এখানে কিছুই হয় না: পি

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

শেষ ফলাফলটি হ'ল ডেস্কটপে আপনি ঘোরা বা ক্লিক করতে পারেন (বেশিরভাগ ব্যবহারকারীরা হোভার করবেন)। একটি স্পর্শ ডিভাইসে, উপাদানটিকে স্পর্শ করা এটিকে এনে দেবে, এবং আবার স্পর্শ করলে এটিকে নামিয়ে আনে। অবশ্যই এটি আপনার আসল প্রয়োজনীয়তা থেকে সামান্য সমঝোতা তবে কমপক্ষে আপনার কোডটি এখন ক্লিনার :)

$ ("। আমার-পপওভার")। পপওভার ({ট্রিগার: 'ক্লিক করুন হোভার'});


0

ম্যাট লকারের কোডটি গ্রহণ করে, আমি একটি সাধারণ রিসেট করেছি যাতে ডোমটি লুকানোর উপাদানটির আওতায় না যায়।

ম্যাট এর কোড: http://mattlockyer.com/2013/04/08/close-a-twitter-bootstrap-popover-when-clicking-outside/

ফিডাল: http://jsfiddle.net/mrsmith/Wd2qS/

    $('body').on('click', function (e) {
    //hide popover from dom to prevent covering elements
    $('.popover').css('display', 'none');
    //bring popover back if trigger element is clicked
    $('[data-toggle="popover"]').each(function () {
        if ($(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
            $('.popover').css('display', 'block');
        }
    });
    //hide popover with .popover method
    $('[data-toggle="popover"]').each(function () {
        //the 'is' for buttons that trigger popups
        //the 'has' for icons within a button that triggers a popup
        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
            $(this).popover('hide');
        }
    });
});

0

এটি চেষ্টা করুন, এটি বাইরে ক্লিক করে লুকিয়ে থাকবে।

$('body').on('click', function (e) {
    $('[data-toggle="popover"]').each(function () {
    //the 'is' for buttons that trigger popups
    //the 'has' for icons within a button that triggers a popup
    if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
    $(this).popover('hide');
    }
    });
});

0

আমি ম্যাটডলকায়ারের সমাধানে সমস্যা হচ্ছিলাম কারণ আমি এই জাতীয় কোড ব্যবহার করে গতিশীল পপওভার লিঙ্কগুলি সেট আপ করছিলাম:

$('body').popover({
        selector : '[rel="popover"]'
});

সুতরাং আমি এটি মত এটি পরিবর্তন করতে হবে। এটি আমার জন্য অনেকগুলি সমস্যা সমাধান করেছে:

$('html').on('click', function (e) {
  $('[data-toggle="popover"]').each(function () {
    //the 'is' for buttons that trigger popups
    //the 'has' for icons within a button that triggers a popup
    if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
        $(this).popover('destroy');
    }
  });
});

মনে রাখবেন ধ্বংসটি উপাদানটি থেকে মুক্তি পেয়ে যায়, তাই নির্বাচক অংশটি পপওভারগুলি আরম্ভ করার ক্ষেত্রে গুরুত্বপূর্ণ।

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.