I have some content that's dynamically loaded on a webpage that contains popovers. For this reason I have to bind them to the body so they load and appear correctly.
I'd like to find a way to hide the popovers when a user clicks outside the popover or on another popover trigger.
I found that if I "hide" the popover, the popover does indeed hide but the elements remain in the DOM. This means that active links in the popover remain "clickable".
If I instead destroy the popover, it hides, but is unable to re-activate if clicked on. The only reliable way to hide the popover is to use "toggle". This increases the complexity of determining which popovers to hide.
Please see this JSFiddle with all this code.
HTML
Yahoo
<br><br> <br> <br> <br> Google
<br><br> <br> <br> <br> Microsoft
JavaScript
$('.some-popover-link').popover({
container: 'body',
html: true,
placement: 'bottom'
});
$(document).click(function (e) {
$('.some-popover-link').each(function () {
if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
$(this).popover('hide'); // this hides popover, but content remains
return;
}
});
});
This relies on internal implementation so be careful but it should work. JSFiddle Link
if ($(this).data('bs.popover').tip().hasClass('in')) {
$(this).popover('toggle');
}
Use this code:
$(document).mouseup(function (e) {
if ($('.popover').has(e.target).length === 0) {
$('.popover').toggleClass('in').remove();
return;
}
});
Related
I am working on a popover code. Which by default works with hover on website. However in the mobile view. Its existing functionality is opening and closing the popover, when we click on the question mark icon. I was trying to close the popover with touch/click event anywhere on the screen with the below code with jQuery.
$('body').on('touchstart', function(e) {
$('[data-toggle="popover"]').each(function() {
if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
$(this).popover('hide');
}
});
});
But now when I want to open the popover again, it highlights the question mark icon but doesn't open the popover. It only hovers it. We have to double click to open the popover
<span href="javascript:void(0)" data-placement="top" data-toggle="popover" data-content="Promotions" data-original-title="" title="">
<a class="tool-tip">?</a>
</span>
The first time it works fine but from the second time the double click issue starts. Please help
You can sure find out how to solve your issue in this link How to dismiss a Twitter Bootstrap popover by clicking outside?
Using Bootstrap 4.1:
$("html").on("mouseup", function (e) {
var l = $(e.target);
if (l[0].className.indexOf("popover") == -1) {
$(".popover").each(function () {
$(this).popover("hide");
});
}
});
I have this code for toggling menus on my site. It will open a menu on click, close others open when you click another and close them all if you click outside.
The issue is, I'm now using this for my search bar to appear too, but if you click inside the search box it vanishes - woops. Would it be possible to amend the hiding code to detect if the user wasn't clicking inside a specific area of the code?
// navbar toggle menu
$(document).on('click', ".toggle-nav > a", function(event) {
event.preventDefault();
event.stopPropagation();
var $toggle = $(this).closest('.toggle-nav').children('.toggle-content');
if ($toggle.hasClass('toggle-active'))
{
$($toggle).removeClass('toggle-active');
}
else
{
$(".toggle-content").removeClass('toggle-active');
$($toggle).addClass('toggle-active');
}
});
// hide the toggle-nav if you click outside of it
$(document).on("click", function ()
{
$(".toggle-content").removeClass('toggle-active');
});
Instead of using click, this uses mouseup. If the target is, for example #search-bar, it won't remove toggle-active from toggle-content elements.
$(document).mouseup(function(e) {
if (!$(e.target).is('#search-bar')) {
$(".toggle-content").removeClass('toggle-active');
}
});
You can see it in action with this jsFiddle.
Hopefully this helps.
I have a popup window that has a form in it and to stop the popped up div clicks from closing the window I've used:
$(".popup").click(function () {
$(".popup").css("display", "none");
}).children().click(function(e) {
return false;
});
However this works perfectly except with checkboxes whereby it disables checking them.
Is there any way around this?
popup is an overlay, then popupInner holds the form.
Try replacing your code with this:
$(".popup").click(function(e) {
if (e.target == this) $(this).hide();
});
It would hide the popup only if clicked on the element with class popup and not its children, it would also keep the functionality of the children intact.
I have a simple button that toggles a menu onclick
If the menu is expanded/visible I hide it when clicking anywhere on the page (a part from the menu itself).
var menuBtn = $(".btn-menu"),
menuContainer = $(".menu"),
menuChildren = $(".menu").find("*");
menuBtn.on("click", function() {
menuContainer.toggle();
});
$(window).mouseup(function(e){
if(!menuContainer.is(e.target) && !menuChildren.is(e.target)){
menuContainer.hide();
}
});
When applying that function on mouseup, my toggle function no longer works. Menu will always stay open if clicking multiple times on the button (whereas it should hide & show).
jsfiddle here
Any idea how I could fix this?
mouseup event was fired before click.
try this
$(window).mouseup(function(e){
if(!menuContainer.is(e.target) && !menuChildren.is(e.target) && !menuBtn.is(e.target)){
menuContainer.hide();
}
});
fiddle js
I have two buttons on my form. A user clicks on any one of the buttons and the drop down is shown, for the corresponding button. Now the user clicks randomly anywhere on the form. So now I want the dropdown to be hidden.
My code has:
$('html').not( "button.btn.dark.dropdown.copy" ).on 'click', (e) ->
if $('ul.drop-menu.copy-menu').css('display') != 'none'
$('ul.drop-menu.copy-menu').hide()
$('html').not( "button.btn.dark.dropdown.move" ).on 'click', (e) ->
if $('ul.drop-menu.move-menu').css('display') != 'none'
$('ul.drop-menu.move-menu').hide()
In the above code, it works fine for the move button but does not work for the copy button. I am unable to find the reason for the same. Any help would be much appreciated.
Check closest target with in the selector,
Suppose your popup showing content is inside .popup class then use it's class name for checking the target
$('body').click(function (e) {
if (!$(e.target).closest('.popup').length) { // exists only when you click on popup area otherwise will return false and will hide popup
$('ul.drop-menu.move-menu').hide()
}
})