Concentrate on a specific component within an overlay using jQuery

Question

Concentrate on a specific component within an overlay using jQuery

How can I focus on a specific area within an overlay when adding an item to the cart? I want to make the rest of the overlay darker and the targeted area more visible.

See a quick mockup here: https://i.sstatic.net/UpJuc.png

Here's the HTML code:

<div class="cm-notification-content cm-notification-content-extended notification-content-extended  cm-auto-hide" data-ca-notification-key="3b71ec814b1cb78f78b7b6602c6258a6" style="top: 143.5px;"><h1>Congrats. You've just added to Cart ...<span class="cm-notification-close close"></span></h1><div class="notification-body-extended"><div class="ty-product-notification__body cm-notification-max-height" style="max-height: 367px;">

            <div class="ty-product-notification__item clearfix">
                <img class="ty-pict  ty-product-notification__image  " src="http://aus2015.ambientlounge.com/images/thumbnails/100/100/detailed/2/wildberry.jpg?t=1440337739" alt="" title="">
                <div class="ty-product-notification__content clearfix butterfly-sofa-bean-bags">
                    <a href="http://aus2015.ambientlounge.com/interior/gold-class-bean-bags/acoustic-sofa-bean-bags/wildberry-deluxe.html" class="ty-product-notification__product-name">Wildberry Deluxe</a>
                                            <div class="ty-product-notification__price">
                                                            <span class="none">1</span>&nbsp;x&nbsp;<span class="none">$</span><span id="sec_price_2343099257" class="none">269.00</span>
                                                    </div>
                                                        </div>
            </div>


<form action="search_postcode.php" method="post" class="postcode_locator_form" name="postcode_locator_form">
    <div class="ty-control-group">
        <label for="postcode_locator_search" class="ty-control-group__title">Check we can send you filling (metro only)</label>
        <div class="ty-input-append ty-m-none">
            <input type="text" size="20" class="ty-input-text" id="postcode_locator_search" name="postcode_locator_search" value="" placeholder="Enter postcode">
            <button title="Search" class="ty-btn-go" type="submit">Go!</button>
<input type="hidden" name="dispatch" value="postcode_locator.search">
        </div>

    </div>
</form>

...

    </div><div class="ty-product-notification__buttons clearfix">    <div class="ty-float-left">

    <a href="http://aus2015.ambientlounge.com/index.php?dispatch=checkout.cart" class="ty-btn ty-btn__secondary ">View my Cart</a>

    </div>
            <div class="ty-float-right">

    <a href="http://aus2015.ambientlounge.com/index.php?dispatch=checkout.checkout" class="ty-btn ty-btn__primary ">Pay Now</a>

        </div>
    </div></div></div>

javascript jquery html css

Answer 1

Answer №1

When you display the overlay, just run this code:

$("#postcode_locator_search").focus();

Tested a Prototype

$(function () {
  $("#btn").click(function () {
    $("body").prepend('<div class="mask"></div>');
    $("li:nth-child(2)").addClass("check").find("input").focus();
  });
});

* {margin: 0; padding: 0; list-style: none; font-family: 'Segoe UI';}
li {margin: 0 0 10px;}
.mask {position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; background-color: rgba(0,0,0,0.5);}
li.check {position: relative; z-index: 2; background-color: #fff;}

<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<form action="">
  <ul>
    <li>
      <label>
        <strong>Input 1</strong>
        <input type="text" name="" />
      </label>
    </li>
    <li>
      <label>
        <strong>Input 2</strong>
        <input type="text" name="" />
      </label>
    </li>
    <li>
      <label>
        <strong>Input 3</strong>
        <input type="text" name="" />
      </label>
    </li>
    <li>
      <label>
        <strong>Input 4</strong>
        <input type="text" name="" />
      </label>
    </li>
    <li>
      <label>
        <strong>Input 5</strong>
        <input type="text" name="" />
      </label>
    </li>
  </ul>
</form>
<input type="button" value="Click Me!" id="btn">

Answer 2

When you display the overlay, just run this code:

$("#postcode_locator_search").focus();

Tested a Prototype

$(function () {
  $("#btn").click(function () {
    $("body").prepend('<div class="mask"></div>');
    $("li:nth-child(2)").addClass("check").find("input").focus();
  });
});

* {margin: 0; padding: 0; list-style: none; font-family: 'Segoe UI';}
li {margin: 0 0 10px;}
.mask {position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; background-color: rgba(0,0,0,0.5);}
li.check {position: relative; z-index: 2; background-color: #fff;}

<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<form action="">
  <ul>
    <li>
      <label>
        <strong>Input 1</strong>
        <input type="text" name="" />
      </label>
    </li>
    <li>
      <label>
        <strong>Input 2</strong>
        <input type="text" name="" />
      </label>
    </li>
    <li>
      <label>
        <strong>Input 3</strong>
        <input type="text" name="" />
      </label>
    </li>
    <li>
      <label>
        <strong>Input 4</strong>
        <input type="text" name="" />
      </label>
    </li>
    <li>
      <label>
        <strong>Input 5</strong>
        <input type="text" name="" />
      </label>
    </li>
  </ul>
</form>
<input type="button" value="Click Me!" id="btn">

Concentrate on a specific component within an overlay using jQuery

Answer №1

Similar questions

Utilizing Mysql Joins with parameterized queries in Node.js: A Comprehensive Guide

In JavaScript, use a regular expression to replace all instances of %2F with %

Animating a JQuery Slider using code from scratch

Dynamic background rectangle tilted at a 45-degree angle overlays an image

Discover the secret to instantly displaying comments after submission without refreshing the page in VueJS

Executing jQuery when the DOM is loaded in Angularjs

Tips for adjusting the size of iframe content to fit its div area in Bootstrap 4 when the window is minimized

Is it possible to display a title tooltip only when the CSS ellipsis feature is active in a React component?

Each occurrence of a variable update will result in the storing of its value within an

Unraveling the mysteries of webpack configuration

Obtain Phonegap Build CLI-5.2.0 and Close Directly from a Web Application

Show User Input as a dynamic tool-tip in Highcharts

Arrange components with minimal spacing

Utilizing Selenium IDE and XPath to confirm that a checkbox is selected only when the associated label contains certain text

Utilize an array of JSON objects to populate an array of interfaces in Angular/Typescript

Error encountered while testing karma: subscription function is not recognized

Place images within a card container using Bootstrap 4

What could be causing the mousedown event to go unrecognized in JavaScript when using THREE?

Express, the mongoose package delivers a response of an empty array

save the received data to a new document