svelte logo

Want a Svelte site built?

Hire a Svelte developer

Modal Svelte

Modal component for Svelte

Features:

  • Autofocus
  • Focus trapping
  • Returns focus after closing
  • Form mode

Demo

Install

npm install modal-svelte

Usage

<script>
  import Modal from 'modal-svelte'
</script>

<Modal title="Hello world!" onCancel={() => (open = false)}>
  <p>Content</p>
</Modal>

Functionality

This shows all available functionality

<Modal
  title="Hello world!"
  onCancel={() => (open = false)}
  form={() => submitMyForm()}
  noEscapeHandling
  noCloseIcon
  let:focus
>
  <p>Content</p>
  <input />

  <!-- If you want to bring focus to a specific element -->
  <input use:focus />

  <div slot="buttons">
    <button type="submit">Submit</button>
  </div>

</Modal>
:root {
  --modal-bg: #fff;
  color: #000;
}

Dev instructions

Get started

  1. Install Node.js
  2. Run npm install

Commands

  • npm run dev: Start in dev mode
  • npm run build: Build
  • npm run lint: Lint
  • npm run format: Format

Publish new version

  1. Update CHANGELOG.md
  2. Check for errors
    npm run lint
    
  3. Bump the version number
    npm version --no-git-tag <version>
    
  4. Generate the package
    npm run build:package
    
  5. Publish the package
    npm publish
    
  6. Commit with a tag in format "v#.#.#"
  7. Create GitHub release with release notes

Top categories

svelte logo

Want a Svelte site built?

Hire a Svelte developer

Get New Themes & Resources

Loading Svelte Themes