56880

How to dim everything on a webpage apart from a div - to bring attention

Question:

Currently none of the already asked questions on this topic are of use, therefore I am asking a new one. I have a log in page, and I have a sign in button, which on click shows a div from being hidden after showing a loading gif for 2 seconds using the following function.

function showDiv() { document.getElementById('Login').style.display = "none"; document.getElementById('loadingGif').style.display = "block"; setTimeout(function() { document.getElementById('loadingGif').style.display = "none"; document.getElementById('showme').style.display = "block"; },2000); }

I am stuck on how I would go about dimming everything behind this div after clicking the sign in button.

My current form

<form action="" method="POST" id="hello" onsubmit="showDiv(); return false;">

My sign in button

<input class="btn_green_white_innerfade btn_medium" type="submit" name="submit" id="Login" value="Sign in" width="104" height="25" border="0" tabindex="5" onclick="showDiv()">

Answer1:

Sounds like you're trying to make a modal. To dim everything on the page:

Create an element on the page

<div class="covering-panel"> // form goes here </div>

and give it a fixed position, where the height and width cover the screen.

.covering-panel { background: rgba(0,0,0, 0.6); // opaque black height: 100vh; // height of the viewport position: fixed; // always cover the screen width: 100%; // width of the viewport z-index: 30; // stay on top of other elements }

Put the form inside the .covering-panel div and use javascript to hide show the whole element.

Recommend

  • Android: How to create the Google Plus login animation?
  • JFrame not painting rectangle
  • Show and hide div elements based on dropdown selection in html using javascript
  • IE8 stops network access after 5 long polling request
  • setTimeOut and local function
  • Unknown C# type
  • What is the first step to using a REST API in Rails?
  • Insert space after period using sed
  • Python: sending key press events over SSH
  • Python PIL to extract number from image
  • Prevent page break in text block with iText, XMLWorker
  • Hide buttons on title bar in Java
  • C++ friend class std::vector
  • Easiest way to get current unix timestamp via XSL
  • SyntaxError: (irb):26: both block arg and actual block given
  • how to set variables in a php include file?
  • Bigquery event streaming and table creation
  • msbuild create itemgroup from property group
  • Kendo barchart category labels left and right based on value
  • Make new pandas columns based on pipe-delimited column with possible repeats
  • How to get current document uri in XSLT?
  • WPF ICommand CanExecute(): RaiseCanExecuteChanged() or automatic handling via DispatchTimer?
  • ViewController With Transparent Background Entering Current ViewController With Push Transition
  • Remove final comma from string in vb.net
  • Keep this build forever option - Jenkins
  • onBackPressed() not being executed
  • Listbox within Listbox and scrolling trouble in Windows Phone 7 Silverlight
  • Refering to the class itself from within a class mehod in Objective C
  • recyclerView does not call the onBindViewHolder when scroll in the view
  • ActionScript 2 vs ActionScript 3 performance
  • To display the title for the current loaction in map in iphone
  • jquery mobile loadPage not working
  • Invalid access key error using credentials redeemed from an amazon open id token
  • Unanticipated behavior
  • Traverse Array and Display in markup
  • PHP: When would you need the self:: keyword?
  • Acquiring multiple attributes from .xml file in c#
  • How to set the response of a form post action to a iframe source?
  • reshape alternating columns in less time and using less memory
  • How can I use threading to 'tick' a timer to be accessed by other threads?