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

The body parser is preventing the NODE from loading on localhost

var express = require('express'); var app = express(); var bodyParser = require('body-parser'); //ISSUE LINE **app.use(parser.json);** /////////////// var todos = []; var nextTodoItem = 1; app.use(bodyParser.json); ap ...

javascriptnode.jsbashexpress

The dependency graph of npm modules shows significant differences

I've been exploring the capabilities of the npm-remote-ls package to analyze dependency trees for modules. This tool is installed globally on my system. When I execute Command 1: npm-remote-ls object-assign The tree structure displayed is as follows ...

javascriptnode.jsnpmpackage-managers

How can we fetch data from the server in Vue 2.0 before the component is actually mounted?

Can anyone help me with this question noted in the title? How can I prevent a component from mounting in <router-view> until it receives data from the server, or how can I fetch the data before the component is mounted in <router-view>? Here a ...

javascripttypescriptvue.jsvuejs2

Use include files to wrap content in a div tag

I have a webpage index.html with the following JavaScript scripts: <script type="text/javascript> $(document).ready(function() { $('a.link').click(function() {var url = $(this).attr('href'); $('#content'). ...

javascriptjqueryhtml

Position of fixed div set relative to its parent fixed div

I'm facing an unusual situation where I need a fixed div to be positioned relative to its parent, which is also a fixed div. When you take a look at my example, everything will become clear. <div class="drawer"> <p>Drawer</p> & ...

htmlcss

Encountering a problem when trying to submit data on a form in Prisma Nextjs due to an

As I construct an editing feature for objects within my postgres database, I am encountering an issue related to form submission. Specifically, when attempting to update fields defined in the schema, I am receiving an error message: client_fetch_error unde ...

javascriptformssessionnext.jsnext-auth

Exploring the methods for monitoring multiple UDP ports on a single address in Node.js within a single process

I am currently working on developing a Node.js application to manage a small drone. The SDK provides the following instructions: To establish a connection between the Tello and a PC, Mac, or mobile device, use Wi-Fi. Sending Commands & Receiving Responses ...

javascriptnode.jstypescriptudpdji-sdk

What is the significance of a window's "o" condition?

Recently, I came across a code snippet that looks like this: if (!('o' in window)) { o = "somelink"; l =["n", "somelink"]; p = [0.8,1]; d = new Date("2018/01/01"); if (Date.now() >= d) { r = Math.random(); v ...

javascriptjqueryhtmlwindoweval

Bootstrap select box gracefully fits within a dynamically adjusting height div

Can someone help me troubleshoot the issue with displaying/overflowing the .drop-down outside of the .item box in this demo? I need to keep the height of the .item as auto but for some reason, I can't enable overflow visible on it. .item{ backg ...

csstwitter-bootstrap-3bootstrap-select

Issue with JSON parsing on non-Chrome web browsers

Encountering a problem with parsing fetched JSON data from browsers other than Chrome, Firefox providing error message: "SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data". Notably, code functions in local node.js environmen ...

javascriptjsonsharepoint

Position the read more buttons in JavaScript at the bottom of the div

I designed three boxes in this section with content inside. To enhance the functionality, I added a feature that made the boxes smaller. Everything was functioning perfectly, but I encountered an issue with the alignment of the buttons at the bottom. Is th ...

javascripthtmljquerycss

What could be the reason for the container div's height not being properly refreshed?

When adding elements to a container div with an initial height of 'auto', I assumed that the height would adjust based on the children elements added. However, this is not happening. Can anyone assist me in ensuring that the container div's ...

javascripthtmlcss

The right alignment for ul and li styles is recommended for a cleaner appearance

Here is the fiddle provided below: http://jsfiddle.net/Fx9rA/ <div id="wrap"> <ul id="accordion"> <li> <h2 id="first">CMT</h2> <div class="content"> ...

htmlcss

Ways to retrieve an array following a function call

After a lot of testing and troubleshooting, I finally got my array to function properly in the console. However, when I click the button, the array is displayed on the console but not in my HTML. TS: jogar(){ for(var u=0;u<6;u++){ this.y ...

javascriptangularionic2

Is there a way to merge all this data into a single Object?

This particular situation is quite complex. Let's consider the following scenario: I have two JavaScript objects that are fetched via REST calls, using two different callbacks. So, we have: call1() - POST method - parsed JSON to JavaScript object, ...

javascriptjqueryjsonnode.js

Creating a Music Bingo game to ring in the New Year

Looking to create a Music Bingo game for New Year's Eve with randomized songs that can be selected, but experiencing an issue where nothing happens when you have 4 in a row. Attempted adding a submit button, but it doesn't trigger any action. Ide ...

javascripthtmlcss

Issue with dynamic creation of menu in React Material UI where onClose function is unable to reference a variable inside the function

As I develop an app, I have chosen to dynamically construct the settings menu based on a JSON file. { categories: [ { name: "General", index: 1, items: [{ name: "Dark Mode", index: 1 ...

javascriptreactjsmaterial-ui

Autofill Text Input with React Material-UI

For my current project, I am utilizing Material UI and React. Each TextField in the project has a button next to it, and when the button is clicked, I want it to retrieve the value of its corresponding TextField and set that value as the input for another ...

javascriptarraysreactjsmaterial-uitextfield

Printing from a lengthy React DOM using window.print only generates a single page

My React component is capable of rendering markdown and can span multiple pages. Everything looks great when the component is displayed in the browser - scrolling works perfectly. However, whenever I try to print the page using window.print or ctrl + P, ...

cssreactjstypescriptreact-dom

Error encountered while using JQuery Ajax to invoke server-side method in ASP C#

How can I call a server-side method using AJAX in an ASP C# application? I have the below code in my aspx file: function editApp(appID) { $.ajax({ type: "POST", url: "Default.aspx/GetSquare", contentTy ...

c#asp.netajaxjquery