Modal

Organism

Odak kapanı dialog. Backdrop, ESC tuşu ile kapatma, ARIA labelledby/describedby ve sm/md/lg boyutu.

Default (md)

Confirm action

This action cannot be undone.

Are you sure you want to delete this item? All associated data will be permanently removed.

Small (sm)

Quick note

A compact modal for short confirmations or alerts.

Large (lg)

Edit profile

Name

No footer

Keyboard shortcuts

Press ESC to close at any time.

Open search⌘K
Close modalESC
New item⌘N

Source modules/ui/Modal.ejs

<%
  var _id          = locals.id          || 'modal-' + Math.random().toString(36).substr(2, 9);
  var _title       = locals.title       || '';
  var _description = locals.description || '';
  var _open        = !!locals.open;
  var _sz          = locals.size        || 'md';
  var _fullscreen  = !!locals.fullscreen;
  var _scrollable  = !!locals.scrollable;
  var _closeOnBackdropClick = locals.closeOnBackdropClick !== false;

  var overlayClass = _open ? 'opacity-100' : 'opacity-0 pointer-events-none';
  var sc = { sm: 'max-w-sm', md: 'max-w-md', lg: 'max-w-lg', xl: 'max-w-xl', '2xl': 'max-w-2xl' };
  var sizeClass = _fullscreen ? '' : (sc[_sz] || 'max-w-md');
  var titleId = _id + '-title';
  var descId  = _description ? (_id + '-desc') : '';
%>
aria-describedby="<%= descId %>"<% } %>
>
  onclick="closeModal('<%= _id %>')"<% } %>
  >
  
    
      
        <%= _title %>
        <% if (_description) { %>
        <%= _description %>
        <% } %>
      
      
    
    <% if (locals.children) { %>
    <%- locals.children %>
    <% } %>
    <% if (locals.footer) { %>
    <%- locals.footer %>
    <% } %>