Is there a way to display the background when the popover is visible and hide it when the popover is hidden?

How do I make the backdrop appear when the popover is displayed, and disappear when the popover is closed? 

$(function(){
  var content = '<button class="btn btn-sm btn-default" onclick="location.href=\'/billing/\'">Pay Now</button>&nbsp;<button class="btn btn-sm btn-default " onclick="$(&quot;.btn-upgrade-premium&quot;).popover(&quot;hide&quot;);">Activation Code</button>';
  $('.btn-upgrade-premium').popover({animation:true, content:content, html:true, placement: 'bottom'});
  $('.btn-upgrade-premium').click(function(){
    $('#backdrop').toggleClass('modal-backdrop in');
  });
});
.btn-upgrade-premium
{
  text-shadow: 0px 1px 0px #FFF;
  background-image: linear-gradient(to bottom, #FFEEBE 0%, #fec215 100%);
  background-repeat: repeat-x;
  border-color: #fec215;
  z-index: 1052;
}
.btn-upgrade-premium:active
{
  background-color: #fec215;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>


<button type="button" class="btn btn-upgrade-premium btn-sm" style="margin-top:11px; padding-bottom:4px; padding-top:4px;" data-container="body" data-trigger="focus"  data-placement="left">
  Upgrade to Premium
</button>
<div id="backdrop"></div>

IMPORTANT:

The issue is that the backdrop does not disappear even after toggling the class.

javascriptjquerycsstwitter-bootstrap

Answer №1

To resolve the issue of the button being covered by #backdrop and therefore not clickable, simply include the CSS style position: relative; to the button within the classes .btn-group-sm>.btn and .btn-sm.

If you prefer to keep the button covered by #backdrop, you can implement the same toggle function to the backdrop element as well.

The problem arises from the interaction between fixed elements (backdrop) and static elements (button). By default, if no position value is specified for the button, it will be set to static. Changing it to relative should solve the problem. Additionally, make sure to check the z-index property, although it seems to be appropriately set in this case.

Answer №2

Take a look at this interesting article for more insights:

https://css-tricks.com/dangers-stopping-event-propagation/

Explore my JFiddle to see it in action: http://jsfiddle.net/davygxyz/ffezrxL5/

Currently, the code works smoothly, but consider testing with additional JavaScript.

Don't forget to integrate the following snippet into your code:

$(document).on('click', function(event) {
          if (!$(event.target).closest('.btn-upgrade-premium').length) {
            $('#backdrop').toggleClass('modal-backdrop in');
          }
    });

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Breaking apart a string that consists of boolean values

Presented below is a JavaScript function function cmd_parse( cmd ) { return cmd.split( /\s+/ ); } For instance, when calling the function like this words = cmd_parse("hello jay true"); The output would be words[0]="hello" words[1]="jay" wor ...

javascriptjquery

"Use AJAX to dynamically update a div element when a button is clicked with a specific value

I have a calendar that is being displayed server side using PHP. My goal now is to allow users to scroll through the months with two buttons (<< / >>) without having to reload the entire page. I have come across many similar questions and examp ...

phphtmljqueryajax

Leveraging ng-class for selectively applying CSS3 animations based on conditions

When specific conditions are met in my controller, I apply two CSS3 animations to the DOM using ng-class. The animations (shake Y & shake X) are added based on certain criteria being satisfied. Here is a snippet of the relevant JavaScript code: $scope.sub ...

javascriptangularjscssanimation

The struggle of positioning two divs in alignment

In my HTML code, I have a div container named row3red3. Inside this container, there are two divs: left (.row3red3slika) and right (.row3red3info). I am facing an issue where I cannot position the right div .row3red3info on top, inline after the image. I ...

htmlcss

The identifier for the input box on my Moodle quiz seems to constantly be in flux! It's like a unique identifier with a colon nestled within

Why does the id of the input box keep changing in my Moodle quiz? One moment it's q1525:32_sub1_answer, then suddenly, it becomes q1526:32_sub1_answer when I switch to Firefox! <input id="q1526:32_sub1_answer" type="text" maxlength="14" size="14" ...

jqueryinputmoodle

Using AJAX calls with React through JQuery

How can I make a JQuery AJAX call in react js instead of using the fetch method? I have an environment restriction that requires me to use JQuery Ajax for getting json format data from a URL. The code snippet below shows my current implementation using t ...

jqueryajaxreactjs

Which characters are permissible for the id attribute to prevent the jQuery selector from throwing an exception?

I am facing a situation where the id attribute is inputted by an end user. For instance, if the id for a textbox is "11_=11" as entered by the user, then the HTML code will appear like this: <input type="text" id="11_=11"> The corresponding jQuery ...

javascriptjquerycsshtml

Interactivity on iPad with Jquery - Touch and Tap Features

My goal is to create a div on the iPad that expands upon one click, and then opens up to fill the browser window with the next click. However, I'm having trouble with the code below: var elems = $( ".event" ); elems.bind("click touchstart", func ...

jquery

The Videojs controls are unresponsive to clicks

Having a strange issue with videojs. I've been attempting to load videojs in the same way as outlined in the documentation, using a dynamic video tag. videojs(document.getElementById('myVideo'), { "controls": true, "autoplay": false, "prelo ...

javascriptjqueryhtmlhtml5-videodynamic-loading

Why is SVG not adjusting to the screen size properly?

How can I make an SVG fit to its parent <div>-container and resize with the screen size? My initial plan involved controlling the size of the SVG based on the percental width and height of the parent <div>-container. Looking for any suggestio ...

htmlcsssvg

JS problem with using for and foreach loops in Node.js

I've been really stumped by this situation. Everything was running smoothly until 4 days ago when two of my cron daemon jobs suddenly stopped working. Instead of ignoring the issue, I decided to take the opportunity to rebuild and enhance the code. I ...

javascriptmysqlnode.jsforeachconsole.log

What is the best way to retrieve specific JSON data from an array in JavaScript using jQuery, especially when the property is

Forgive me if this question seems basic, I am new to learning javascript. I am currently working on a school project that involves using the holiday API. When querying with just the country and year, the JSON data I receive looks like the example below. ...

javascriptjqueryarraysjsonapi

What is the best approach for testing the TypeScript code below?

Testing the following code has been requested, although I am not familiar with it. import AWS from 'aws-sdk'; import db from './db'; async function uploadUserInfo(userID: number) { const user = db.findByPk(userID); if(!user) throw ...

javascriptnode.jstypescripttesting

Encountering the error `RollupError: Expression expected` during the compilation of an NPM package

Following the setup of my environment to create my initial NPM package for React JS with ROLLUP bundler, I encountered a RollupError: Expression expected error message as displayed below: Error Message > rollup -c --environment NODE_ENV:development dev ...

javascriptreactjsrollupjs

align the horizontal navigation bar

I am facing an issue with my horizontal navigation bar. I want to include a search bar within the navigation bar, but it is causing misalignment. Here is the link to the code: https://jsfiddle.net/r6ntxg2f/ If you look at the menu, you will notice that i ...

css

Accessing the element within an ion-tab using document.getElementById

Within my ion-view, I have ion-tabs containing a canvas element. However, when attempting to retrieve the canvas using document.getElementById('photoCanvas'); I receive 'undefined'. Here is the code snippet: HTML: <ion-view ...

javascriptangularjsdomionic-framework

Creating a custom blockquote style for a WordPress Twenty Fifteen child theme

Currently, I am creating a new child theme for Twenty Fifteen completely from scratch. The one area I am struggling with is customizing the appearance of the blockquote using CSS. Here is an example of the custom CSS I have added to the blockquotes within ...

htmlcsswordpress

Generate a new perspective by incorporating two distinct arrays

I have two arrays containing class information. The first array includes classId and className: classes = [ {classid : 1 , classname:"class1"},{classid : 2 , classname:"class2"},{classid : 3 , classname:"class3"}] The secon ...

javascripthtmlangulartypescriptangular8

Check for a rapid return if the function ends up returning null in JavaScript

Is there a way to make this code more concise? const result = getResult(); if (!result) { return; } // Work with result I have several instances of this code in my project and I'm looking for a simpler solution like: const result = getResult() ...

javascripttypescriptecmascript-6

What is the best way to ensure that this jQuery window has a minimum size?

Recently, I came across a helpful jQuery demo that demonstrated how to create a popup window on my website. For those interested, the demo link can be accessed here: http://jqueryui.com/dialog/#modal-message The design of the window I am aiming to replica ...

javascriptjqueryhtmlcssjquery-ui