使用jQuery关注覆盖中的某些元素

Question

当你将一个项目添加到购物车时我会弹出一个叠加层，并且想知道是否有人知道如何将焦点集中在叠加层内的某个区域...就像覆盖层的较暗的其余区域和某个区域更多可见。

快速模型：

HTML：

/profile/profile

Answer 1

显示叠加层后，只需执行以下操作：

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

尝试了样机

$(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">