Clearing the content div and making it reappear using javascript

I am currently utilizing jQuery's CustomBox modal feature. While it is functioning properly, I am seeking a way to hide the div behind the modal (excluding the background image) when the modal is activated. I have successfully achieved this, but I am unsure of how to make that div visible again once the modal is closed. Currently, I must refresh the page for it to appear.

Here is the code snippet I have been using so far: http://codepen.io/doolz77/pen/esoHB/

I have omitted including the modal code here due to its length, however, you can view the actual page to see it in action.

To trigger the modal, simply click on the 'joey' link.

Thank you!

EDIT: The current control is done through jQuery. The function added in the footer is:

<script>
$(function () {
    $('#fadein').on('click', function () {
    $.fn.custombox( this {
    effect: 'fadein'
    });
    return false;
    });
});
</script>

This script handles the fading in and out of the modal. Should I add some code here to make the #wholePageContainer div reappear?

Answer №1

To preserve the HTML content before deletion for later retrieval, consider storing it in a variable. Alternatively, you can utilize the show/hide technique to streamline the process and achieve the desired functionality:

function hideContent(container)
{
 document.getElementById(container).style.display = "none";
}
function showContent(container)
{
 document.getElementById(container).style.display = "block";
}

View Demo

Answer №2

Does this meet your needs?

http://codepen.io/anon/pen/giFEL

Updated: Here's an explanation of the link above: I set the html and body tags to 100% in the given link, along with resizing a div element to 50%. This ensures that the div maintains its space even if it is empty.

Additionally, I saved the html content in a hidden div element and restore it back to the original div as needed.

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

Managing post requests in node.js using busboy and then multer

I'm currently facing an issue with busboy (or multiparty) and multer while trying to parse my request. Initially, the request is received successfully using busboy, where I proceed to create a folder and update my database. However, when I attempt to ...

Issue with Angular modal popup not repositioning upon clicking elsewhere on the page

I have encountered an issue with modal popups on my website. Specifically, I have approximately 100 table elements and when I try to edit the element #100, the modal popup appears at the bottom of the page. However, if I scroll back up and click on eleme ...

Tips for Implementing CSS Styles on Ruby on Rails HTML Pages

Just starting out with RoR and trying to customize my form with CSS classes. Here's what I have so far: <%= form_tag :action => 'create' do %> <p><label for = "name">Name</label>: <%= text_field ...

Is it permissible to have multiple class tags in HTML?

Is the HTML code below correctly formatted? <div class="navbar" class="menu">foo</div> Can two classes be applied to the same element? ...

Troubleshooting CSS override issues when swapping components in ReactJS

Access.js import React from 'react' export default class Access extends React.Component { componentWillMount(){ import ('./styles/access_page.css'); } .... <Link to="/new-account">Sign Up</Link> } Cr ...

Error message: npm command not recognized while running commands within an Electron application

While developing an electron app, I utilize shell commands with child_process.exec. One of the commands I use is npm run start, which functions perfectly in a development environment. However, upon building the application for production, all npm commands ...

Trouble with NodeJS: Unresponsive after AJAX post

Using NodeJS/Express with jQuery on the client side, I attempted to send a JSON object to the NodeJS/Express server for further processing. However, instead of receiving the expected "Hello World" message from the exports.findApiData function in index.js, ...

What is the best way to ensure that my transitionend event is triggered?

I'm currently exploring the <progress> element and attempting to incorporate a CSS transition to achieve a smooth progress bar effect as its value increases. Despite my efforts, I can't seem to trigger JS after the transitionend event occur ...

Clicking outside of Bootstrap Modal inputs causes them to lose focus

Currently, I am tackling a challenge involving 2 bootstrap modals located on the same page with Bootstrap version 2.3.2. A frustrating issue that has arisen is that whenever either modal appears, the first time you click on any of the inputs within the mo ...

pictures in photo display

Please check out my codepen project: html code: <body> <div class="thumbnails"> <a href="#"><img src="http://s30.postimg.org/4yboplkxd/dotty.jpg" width="100" height="100"></a> <a href="#"><img src="http:// ...

Utilize Bootstrap modal to input information into the DataTables library

I am trying to use a bootstrap modal to insert data, but I am encountering an error on the action index. As a result, the button that I added is not functioning correctly. Can someone please review my code to see if there are any mistakes? User Action Con ...

Unsuccessful attempt at implementing knockout data-binding on a dynamic webpage utilizing the Hot Towel API

I'm facing an issue while trying to bind knockout data to a dynamically generated input field. To briefly explain the canActivate(id) function, it retrieves details of all necessary objects for the page and stores them in vm.OPCLayoutVm. ...

Ways to retrieve and update the state of a reactjs component

I'm facing an issue with modifying a React JS component attribute using an event handler. export default interface WordInputProps { onWordChange:(word:string) => void firstLetter:string disabled?:boolean } These are the props for my co ...

Using JQuery to interact with Java REST WebServices from HTML pages

Having trouble with RESTful webservices. My setup: On the server-side, I'm utilizing EJB3 + RESTful webservices. For the client-side, I have bootstrap twitter + JQuery 1.8 and Ajax methods to access my webservices. Created a JSP on the server-side ...

Developing a dynamic user interface using an Angular framework and populating it with

I am currently learning Angular (version 1) and facing an issue with my layout. I need to dynamically change the navigation based on the type of user that is logged in. To achieve this, I make an API request when the page loads to fetch the user object dat ...

Observing and showing profound modifications in Vue

I need to show a distinct message for each category that the user selects <v-select multiple style="position: relative; top: 20px;" color="white" v-if="count == 3 && question" solo placeholder="Please Cho ...

When the dropdown menu is displayed, apply a class to the parent <li> element's

Encountering a frustrating problem where I'm trying to assign a class to an li a when its submenu is visible. However, the class is being added to all li a elements, including those in the submenu. <ul id="nav"> <li><a href="#" tar ...

What is the best way to stack a canvas box on top of another canvas box?

My goal is to have two canvas squares stacked on top of each other. While I am familiar with drawing on canvas, I need assistance in placing one canvas on top of another. Despite my attempts at setting the position, I have not been successful. <canvas ...

Issue with Jquery modal not functioning properly on second attempt

Currently, I am working on developing an application using CodeIgniter. However, I have encountered a problem where the modal window does not open for the second time. Here is a more detailed explanation of the issue: The form (view) in question contains ...

Generate a request to load JSON data

On my webpage, I have several external JSON files that need to be loaded. I'm looking for a way to specify the order in which they should be loaded. Using JavaScript for this task, here is an example: const func1 = () => { $.getJSON(json1, re ...