HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>fadeTo modal backdrop</title>
  <style>
    body { font-family: sans-serif; padding: 16px; margin: 0; }
    #backdrop {
      display: none;
      position: fixed;
      inset: 0;
      background: #000;
      opacity: 0;
    }
    #modal {
      display: none;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: #fff;
      padding: 24px;
      border-radius: 8px;
      box-shadow: 0 8px 32px rgba(0,0,0,0.3);
      z-index: 2;
    }
    button { padding: 8px 16px; margin-right: 8px; }
  </style>
</head>
<body>
  <button type="button" id="open">Open modal</button>
  <button type="button" id="close">Close</button>
  <div id="backdrop"></div>
  <div id="modal">Modal content — backdrop uses fadeTo, not fadeOut.</div>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script>
    $("#open").on("click", function () {
      $("#backdrop").show().fadeTo(600, 0.4);
      $("#modal").fadeIn(400);
    });
    $("#close").on("click", function () {
      $("#modal").fadeOut(300);
      $("#backdrop").fadeTo(400, 0, function () {
        $(this).hide();
      });
    });
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

jQuery .fadeTo() — modal backdrop dim (Try It)