CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrap-3
segFault
segFault

Reputation: 1228

On input focus make background look like modal

On my webpage, I have a footer which has a textarea box. When the user clicks in the textarea, I want the rest of the page to darken by 60%, kindof like they are in a modal. I am a noob when it comes to advanced css so I am unsure of the properties to apply.

I am using bootstrap 3, javascript and knockout. I know how to detect when the user is in the text area I just want to change the background so everything else is opaque.

A jsFiddle would be wonderful as well :)

Upvotes: 1

Views: 1927

Answers (3)

Joshua
Joshua

Reputation: 856

A good solution is to make a modal appear behind the input and not just making the background darker, this can be accomplished with css alone

...

<style>
textarea:focus{
  z-index: 901;
  position: relative;
}
textarea ~ .textarea-modal{
  position: fixed;
  background-color: transparent;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 900;
  pointer-events: none;
  transition: background-color .5s ease;
}
textarea:focus ~ .textarea-modal{
  pointer-events: auto;
  background-color: rgba(0,0,0,0.3);
}
</style>

...

<div>
    <textarea></textarea>
    <div class="textarea-modal"></div>
</div>

...

feel free to change the selectors to target specific elements, however at the moment when you focus on the textarea a modal would appear below it with other elements behind.

Upvotes: 0

thmshd
thmshd

Reputation: 5847

We use a combination of CSS and JQuery JavaScript for that. You'd basically use some Overlay method first to overlay the whole page (e.g. See Technique #1 from the Link).

With the help of JavaScript, We attach to events of the forms to:

  • Show the Overlay
  • Make the required form elements, e.g. the first Div inside the form, appear above the Overlay ("z-index" CSS attribute)

CSS: Overlay has Z-Index 10, so give the relevant element the Z-Index 11 to appear on top:

form > div { z-index: 11; }

this JQuery JavaScript can look like this:

$(document).on("focus", "textarea", function() {
    $(".overlay").show();
});

Beware, this is not only a "background" topic, if you want to prevent users to do any interaction with the page, you need an overlay which actually blocks clicks. Also, in our case, we also had to prevent any links to be triggered which are below the overlay. Users were still able to go through the links using the TAB key on they keyboard to navigate to a button and click it using the Space key, so we also added JavaScript code to prevent that when in editing mode.

EDIT: a very basic Fiddle

Upvotes: 1

What have you tried
What have you tried

Reputation: 11138

Here is how I would do this - When the user clicks in the text area, set a class on body, and style the class.

with jQuery (you can use vanilla js too)

$('.my-textarea').on('focus', function() {
 $('body').addClass('dark');
});

$('.my-textarea').on('blur', function() {
  $('body').removeClass('dark');
});

body.dark {
  background-color: #333;
  opacity: 0.6;
}

Upvotes: 0

Related Questions