javascript - w3schools - bootstrap w3school




আমি কীভাবে টুইটারে বুটস্ট্র্যাপ পপভারকে বন্ধ করে দিতে পারি? (20)

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

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;
  }
});

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

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

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

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

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

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


tweaked @ ডেভিড Wolever সমাধান সামান্য:

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);
}

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

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

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

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

আমি আমার সমস্ত popovers ক্লাস ক্লাস activate_popover । আমি একবার ওভারলোড তাদের সব সক্রিয়

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

যা বুটস্ট্র্যাপ 2.3.1 সাথে পুরোপুরি সূক্ষ্ম কাজ করে


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

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

আমি এটা সহজ, কার্যকর এখনো পছন্দ করি ..

var openPopup;

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

    }
    openPopup=this;
});

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

কোড:

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

আমি নীচের হিসাবে এটা না

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

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


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

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

এটি 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();
});

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

একযোগে একবার বা এক পপোভার একাধিক popovers খুলুন।

প্লাস এই ছোট কোড স্নিপেট আইকন ধারণকারী বোতাম বন্ধ হ্যান্ডেল করতে পারেন!

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


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

/**
* 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;
        }        
    });
});

এটি আরও সহজ:

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

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

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

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

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

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


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

আপনি যদি দস্তাবেজের শরীরের ইভেন্ট শ্রোতা সেট করেন, তবে যখন আপনি 'পপআপ মার্কার' দিয়ে চিহ্নিত উপাদানটিতে ক্লিক করবেন তখন এটি ট্রিগার হবে। তাই আপনি ইভেন্ট বস্তুর উপর 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 টি পপোভার খুলতে পারবেন না। কিন্তু আমি মনে করি যে ব্যবহারকারীর জন্য বিভ্রান্তিকর হবে, যাইহোক :-)


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

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

বিদ্যমান সকল উত্তর মোটামুটি দুর্বল, কারণ তারা সমস্ত ডকুমেন্ট ইভেন্টগুলি ধরে নেওয়ার পরে সক্রিয় popovers খুঁজে পেতে, বা কল .popover() এ কল পরিবর্তন করতে .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);
}

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

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

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>

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

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


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

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

পরিষ্কার হতে, শুধু পপভার ট্রিগার





twitter-bootstrap