Hide the background when the modal appears

I have successfully implemented a jQuery CustomBox modal on my website. However, I am facing an issue with hiding the content div behind the modal once it pops up. My goal is to make the content div reappear after the modal has been closed. You can view a working example of this here.

Although I have watched jQuery videos from css-tricks for guidance, I am still struggling to make this functionality work. Any assistance would be highly appreciated!

EDIT: In addition to closing the modal using the 'x' button, I also want the content div to reappear when the modal is closed by clicking outside the modal screen.

You can visit the actual webpage here.

When you click on ‘CLICK ME’, the modal pops up as expected. However, I only want the background image of the cellar to be visible, not the page underneath it. Are there any suggestions on how to achieve this?

Any input or advice would be greatly appreciated. Thank you!

javascriptjqueryhtmlcssmodal-dialog

Answer №1

  $(document).ready(function(){
    $("#fadein").click(function(){
      $("#foo").hide();
    });
    $("#showFoo").click(function(){
      $("#foo").show();
    });
  });

VIEW DEMO

Edit Section

HTML Code:

<button type="button" class="close" id="close-mod" onclick="$.fn.custombox('close'); myfunction();">&times;</button>

JS Code:

function myfunction() {
    $("#foo").show();
};

$(document).ready(function(){
   $("#fadein").click(function(){
     $("#foo").hide();
   });
});

DEMO LINK


CSS Update to Change Background Color Opacity of .custombox-overlay

Final Demo with Updates

.custombox-show ~ .custombox-overlay {
  background-color: black !important;
  opacity:1;
}

Answer №2

Finally, the solution came to me. By positioning the cellar image in this way, everything fell into place. It may not be the most elegant fix, but I'm satisfied with it :)

.custombox-show ~ .custombox-overlay {
    opacity: 1;
    background: url(../images/img.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

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

When running through a loop, the JSON array data containing the merged arrays is not being shown as expected

After combining the two PHP arrays $pricelist and $product and encoding them with JSON, the resulting JSON array is as follows: The PHP arrays look like this: Array ( [0] => Array ( [PriceList] => Array ( ...

jqueryjsonloops

Guide to transferring a series of numerical data from a website to a server through an Ajax request

I'm facing an issue with my ajax implementation. I am trying to send an array of integers that are selected using checkboxes. The array is populated correctly, but when it is sent to the controller method, it becomes null. Here is the Ajax code snipp ...

c#jqueryajaxasp.net-mvc

Show the combined cost and dimensions of products depending on the quantity and type of product in WooCommerce

Thank you for your patience with me as I continue to learn and improve my coding skills. The assistance I've received so far has been invaluable, and I truly appreciate it. I currently have a code snippet that calculates the amount of fabric being pu ...

phpjquerywordpresswoocommerceproduct

Error: The current component does not have a template or render function specified. Check the <App>

I am a beginner in Vue js and I am facing an issue while running my application. It is showing an empty page with the error message: Component is missing template or render function. at <App>. Additionally, there is also a warning from Vue Router sa ...

javascriptvue.js

How to completely disable a DIV using Javascript/JQuery

Displayed below is a DIV containing various controls: <div id="buttonrow" class="buttonrow"> <div class="Add" title="Add"> <div class="AddButton"> <input id="images" name="images" title="Add Photos" ...

javascriptjqueryhtml

The alignment of the JQuery Mobile tabs is off

As I work on developing a Cordova app, I've noticed that the tabs on my Android phone display in an unusual way. Here's what they look like: The image above was created in JSFiddle using JQuery 2.1.0 and JQM 1.4.2 selected with the following co ...

javascriptjqueryhtmlcssjquery-mobile

The method for organizing boxes on the stack exchange website's list page

I can't help but wonder about a unique and innovative feature on this stackexchange page that showcases all the stackexchange sites in a grid layout. Upon clicking on a site box, it expands in size while the surrounding boxes adjust their positions t ...

javascriptalgorithmhtmlstackexchange

Error in Jade compilation: 'Unforeseen Symbol "period"'

Struggling to put together a basic Jade template: p hello Below is the associated JavaScript code (JQuery has already been imported): var jade = require('jade'); $('#container').html(jade.compile('../jade/gen.jade')); An ...

jquerynode.jscompilationpug

Unexpected JavaScript Bug (with jQuery)

I have an interesting code snippet that captures button clicks and then hides the existing content, revealing the content of the clicked item instead. This code is part of my init.js file along with other functionalities: $(function() { $('#conta ...

javascriptjqueryhtml

Enhance the functionality of AngularJS (Restangular) by encapsulating service methods with a

Initially, when using basic $http, I had this code snippet in a service: var fetchSomeData = function() { var deferred = $q.defer(); $timeout(function() { $http.get('...mylongurl', { headers: { 'Content-Type& ...

javascriptangularjspromiserestangular

Adding classes to a randomly generated <li> element in a unique and one-time fashion

My task involves using jQuery to dynamically add <li> elements inside a <div>: countItems = 60; for (i = 1; i <= countItems; i++) { $('#head #lol').append("<li id='item_"+ i++ +"' clas ...

jqueryrandomhtml-listsduplicatesaddclass

The no-unused-expressions rule is triggered when an assignment or function call is expected

I'm just starting out in full stack development and I'm experimenting with coding to improve my understanding of frontend using React JS and Material UI. While working on this component, I encountered an error in the console at line 75 (this.prop ...

javascriptreactjsmaterial-ui

innerhtml does not display the entire array contents

I'm facing an issue with my innerHTML output where it seems to be displaying one less value than expected from the array. I've been unable to pinpoint the exact problem. await fetch(urlbody, bodyrequestOptions) .then((response) => response ...

javascripthtmldom

What is the method for embedding a concealed form within a table?

I am a beginner in HTML and RoR. I am trying to include a button inside a table that will submit a hidden form. However, I am facing an issue where the button is not showing up in the generated HTML. <table class="centerBox"> <h3>Search Resu ...

htmlruby-on-railsruby

How to properly set margins for button components in Material UI

I'm working with a centered Toolbar in Material UI that consists of 3 components, each being a button. My goal is to add some margin around each button. I attempted to use the {mt} option within the component button, but didn't see any changes re ...

cssmaterial-ui

The Chrome extension functions properly when the page is refreshed or loaded, but it does not work with internal navigation

When landing on a YouTube page starting with w*, I have a script that triggers an alert with the URL. However, this only works when entering the page directly or upon refreshing. I am trying to make the alert trigger when navigating internally to that page ...

javascriptgoogle-chrome-extension

Guide on deleting files from WordPress Media Library directly using PHP in the frontend

I have searched various sources while creating my current code, but I have yet to find the answer to this question: Link 1 Link 2 Link 3 Link 4 Creating a file management system where admin access is restricted from WordPress. They will manage files th ...

phphtmlwordpressfrontendmedia-library

What steps should be taken to complete orders following the checkout.session.completed event triggered by Stripe?

Having an issue with Stripe's metadata object that has a limit of 500 characters. My checkout flow is operational, but the only constraint is the character limit for my cart. I need to include extras and customer notes in my cartItems object for each ...

javascriptnode.jsstripe-paymentsmern

Establishing a Geolocation Object in HTML5

My HTML5 app relies on Geolocation. In cases where the user denies permission for geolocation, I want to pass a default position object (latitude:0, longitude:0) to ensure the app can still function. I understand how to detect permission denial, but I&apo ...

javascriptangularjsgeolocation

Why is the state object empty in this React Native function?

One React-Native component I have is responsible for rendering an image gallery in a list format. This component is called once for each item on the parent list. It takes two props: "etiqueta," which contains the title of the item, and "galleries," which i ...

javascriptreactjsreact-native