<button class="btn btn-primary" id="openDialog">
    Edit profile
  </button>

</div>

<h2 id="dialogTitle">
        Edit profile
      </h2>

<p>
        Make changes to your profile here.
        Click save when you're finished.
      </p>

</div>

</div>

<label for="username">
          Username
        </label>

</div>

<label for="email">
          Email
        </label>

</div>

<button
        class="btn btn-secondary"
        id="cancelDialog"
      >
        Cancel
      </button>

<button
        class="btn btn-primary"
        id="saveDialog"
      >
        Save changes
      </button>

</div>

<div class="toast" id="toast">
  Profile updated
</div>

* {
  box-sizing: border-box;
}

:root {
  --background: #09090b;
  --foreground: #fafafa;

--card: #09090b;

--muted: #a1a1aa;

--border: #27272a;

--input: #27272a;

--secondary: #27272a;

--secondary-hover: #3f3f46;

--primary: #fafafa;
  --primary-foreground: #18181b;
}

html,
body {
  margin: 0;
  min-height: 100%;

font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

background: var(--background);
  color: var(--foreground);
}

/* DEMO */

.demo-page {
  min-height: 100vh;

display: flex;
  align-items: center;
  justify-content: center;

background:
    radial-gradient(
      circle at 50% 30%,
      #18181b,
      #09090b 55%
    );
}

/* BUTTON */

.btn {
  height: 38px;

display: inline-flex;
  align-items: center;
  justify-content: center;

padding: 0 15px;

border-radius: 7px;

font-size: 13px;
  font-weight: 500;

cursor: pointer;

transition:
    background 0.15s,
    border-color 0.15s,
    transform 0.1s;
}

.btn:active {
  transform: scale(0.98);
}

.btn-primary {
  border: 1px solid var(--primary);

background: var(--primary);

color: var(--primary-foreground);
}

.btn-primary:hover {
  background: #e4e4e7;
}

.btn-secondary {
  border: 1px solid var(--border);

background: transparent;

color: var(--foreground);
}

.btn-secondary:hover {
  background: var(--secondary);
}

/* OVERLAY */

.dialog-overlay {
  position: fixed;

inset: 0;

z-index: 100;

display: flex;
  align-items: center;
  justify-content: center;

padding: 20px;

background:
    rgba(0, 0, 0, 0.78);

backdrop-filter: blur(4px);

opacity: 0;
  visibility: hidden;

transition:
    opacity 0.18s ease,
    visibility 0.18s;
}

.dialog-overlay.open {
  opacity: 1;
  visibility: visible;
}

/* DIALOG */

.dialog {
  position: relative;

width: min(
    460px,
    100%
  );

padding: 24px;

border:
    1px solid var(--border);

border-radius: 10px;

background:
    #09090b;

box-shadow:
    0 20px 70px
    rgba(0, 0, 0, 0.65);

transform:
    scale(0.96)
    translateY(8px);

opacity: 0;

transition:
    transform 0.18s ease,
    opacity 0.18s ease;
}

.dialog-overlay.open
.dialog {

transform:
    scale(1)
    translateY(0);

opacity: 1;
}

/* HEADER */

.dialog-header {
  padding-right: 30px;
}

.dialog-header h2 {
  margin: 0;

font-size: 18px;
  font-weight: 600;

letter-spacing:
    -0.3px;
}

.dialog-header p {
  margin:
    6px 0 0;

color: var(--muted);

font-size: 13px;
  line-height: 1.5;
}

/* CLOSE */

.dialog-close {
  position: absolute;

right: 15px;
  top: 13px;

width: 30px;
  height: 30px;

display: flex;
  align-items: center;
  justify-content: center;

border: 0;
  border-radius: 6px;

background: transparent;

color: #71717a;

font-size: 21px;

cursor: pointer;

transition:
    color .15s,
    background .15s;
}

.dialog-close:hover {
  color: #fafafa;

background:
    #18181b;
}

/* FORM */

.dialog-body {
  display: grid;

gap: 16px;

margin-top: 24px;
}

.form-row {
  display: grid;

grid-template-columns:
    90px 1fr;

align-items: center;

gap: 14px;
}

.form-row label {
  text-align: right;

font-size: 13px;
  font-weight: 500;
}

.form-row input {
  width: 100%;
  height: 38px;

padding:
    0 11px;

border:
    1px solid var(--input);

border-radius:
    7px;

outline: none;

background:
    #09090b;

color:
    var(--foreground);

font-size: 13px;

transition:
    border-color .15s,
    box-shadow .15s;
}

.form-row input:hover {
  border-color:
    #3f3f46;
}

.form-row input:focus {
  border-color:
    #52525b;

box-shadow:
    0 0 0 3px
    rgba(255,255,255,.08);
}

/* FOOTER */

.dialog-footer {
  display: flex;

justify-content: flex-end;

gap: 8px;

margin-top: 24px;
}

/* TOAST */

.toast {
  position: fixed;

right: 24px;
  bottom: 24px;

padding:
    11px 15px;

border:
    1px solid var(--border);

border-radius:
    8px;

background:
    #18181b;

color:
    #fafafa;

font-size: 12px;

box-shadow:
    0 10px 30px
    rgba(0,0,0,.35);

opacity: 0;

transform:
    translateY(10px);

pointer-events: none;

transition:
    .25s;
}

.toast.show {
  opacity: 1;

transform:
    translateY(0);
}

/* MOBILE */

@media (
  max-width: 520px
) {

.dialog {
    padding: 20px;
  }

.form-row {
    grid-template-columns: 1fr;

gap: 6px;
  }

.form-row label {
    text-align: left;
  }

.dialog-footer {
    flex-direction: column-reverse;
  }

.dialog-footer .btn {
    width: 100%;
  }

}

const overlay =
  document.getElementById(
    "dialogOverlay"
  );

const openButton =
  document.getElementById(
    "openDialog"
  );

const closeButton =
  document.getElementById(
    "closeDialog"
  );

const cancelButton =
  document.getElementById(
    "cancelDialog"
  );

const saveButton =
  document.getElementById(
    "saveDialog"
  );

const toast =
  document.getElementById(
    "toast"
  );

function openDialog() {

overlay.classList.add(
    "open"
  );

overlay.setAttribute(
    "aria-hidden",
    "false"
  );

document.body.style.overflow =
    "hidden";

setTimeout(
    function() {

document
        .getElementById("name")
        .focus();

},
    150
  );

}

function closeDialog() {

overlay.classList.remove(
    "open"
  );

overlay.setAttribute(
    "aria-hidden",
    "true"
  );

document.body.style.overflow =
    "";

}

/* OPEN */

openButton.addEventListener(
  "click",
  openDialog
);

/* CLOSE BUTTON */

closeButton.addEventListener(
  "click",
  closeDialog
);

/* CANCEL */

cancelButton.addEventListener(
  "click",
  closeDialog
);

/* CLICK OUTSIDE */

overlay.addEventListener(
  "click",
  function(event) {

if (
      event.target === overlay
    ) {

closeDialog();

}

}
);

/* ESCAPE */

document.addEventListener(
  "keydown",
  function(event) {

if (
      event.key === "Escape" &&
      overlay.classList.contains(
        "open"
      )
    ) {

closeDialog();

}

}
);

/* SAVE */

saveButton.addEventListener(
  "click",
  function() {

closeDialog();

toast.classList.add(
      "show"
    );

setTimeout(
      function() {

toast.classList.remove(
          "show"
        );

},
      2200
    );

}
);

Liveweave: Generative AI Web Editor & HTML/CSS/JS Playground