Link copied!

Dialog Examples

<e-dialoghandler class="e-btn" dialog="#dialog-default">
  Open Dialog
</e-dialoghandler>

<e-dialog id="dialog-default" headline="Dialog Title">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <p>Aliquam hendrerit turpis quis interdum porttitor. Nam luctus enim eget nibh porta.</p>
</e-dialog>
<e-dialoghandler class="e-btn" dialog="#dialog-nokeys">
  Open Dialog With Disabled Keyboard Actions
</e-dialoghandler>

<e-dialog id="dialog-nokeys" headline="Dialog Title" no-keys>
  <p>Sunt, dolor cupidatat, sunt, velit, laborum dolore incididunt consequat do consequat?</p>
  <p>Esse est reprehenderit exercitation non lorem veniam, anim ullamco ut? Ea qui sit tempor, culpa in laboris tempor voluptate fugiat.</p>
</e-dialog>
<e-dialoghandler class="e-btn" dialog="#dialog-noclose">
  Open Not-Closable Dialog
</e-dialoghandler>

<e-dialog id="dialog-noclose" headline="Dialog Title" no-close>
  <p>Sunt, dolor cupidatat, sunt, velit, laborum dolore incididunt consequat do consequat?</p>
  <p>Esse est reprehenderit exercitation non lorem veniam, anim ullamco ut? Ea qui sit tempor, culpa in laboris tempor voluptate fugiat.</p>

  <e-dialog-footer>
    <e-dialog-footer-actions>
      <button type="button" class="e-btn e-btn-highlight" data-action="close">
        Close This
      </button>
    </e-dialog-footer-actions>
  </e-dialog-footer>
</e-dialog>
<e-dialoghandler class="e-btn" dialog="#dialog-focus">
  Open Dialog With Autofocus
</e-dialoghandler>

<e-dialog id="dialog-focus" headline="Dialog Title">
  <p>Sunt, dolor cupidatat, sunt, velit, laborum dolore incididunt consequat do consequat?</p>
  
  <div class="e-field">
    <label class="e-field__label" for="input01">Autofocused Field</label>
    <input class="e-input" id="input01" type="text" placeholder="Type text here" data-autofocus>
  </div>
  
  <p>Esse est reprehenderit exercitation non lorem veniam, anim ullamco ut? Ea qui sit tempor, culpa in laboris tempor voluptate fugiat.</p>
</e-dialog>
<e-dialoghandler class="e-btn e-btn-disabled" dialog="#dialog-disabled" disabled>
  Disabled Open Dialog Handler
</e-dialoghandler>

<e-dialog id="dialog-disabled">
  <p>Sunt, dolor cupidatat, sunt, velit, laborum dolore incididunt consequat do consequat?</p>
  <p>Esse est reprehenderit exercitation non lorem veniam, anim ullamco ut? Ea qui sit tempor, culpa in laboris tempor voluptate fugiat.</p>
</e-dialog>
<e-dialoghandler class="e-btn" dialog="#dialog-header-footer">
  Open Dialog With Custom Header and Footer
</e-dialoghandler>

<e-dialog id="dialog-header-footer" headline="Custom Header Title">
  <e-dialog-headline-slot>
    <span class="e-label e-label-success">Complete</span>
    <button class="e-btn">Rerun Jobs</button>
  </e-dialog-headline-slot>

  <e-dialog-header>
    <e-tab-bar>
      <e-tab label="Tab One" spacing="cozy" selected>
        <e-tab-content>
          <p>Sunt, dolor cupidatat, sunt, velit, laborum dolore incididunt consequat do consequat?</p>
        </e-tab-content>
      </e-tab>
      <e-tab label="Tab Two" spacing="cozy">
        <e-tab-content>
          <p>Esse est reprehenderit exercitation non lorem veniam.</p>
        </e-tab-content>
      </e-tab>
    </e-tab-bar>
  </e-dialog-header>

  <e-dialog-footer>
    <e-dialog-footer-slot>
      Finished jobs: 2/2
    </e-dialog-footer-slot>
    
    <e-dialog-footer-actions>
      <button class="e-btn e-btn-borderless">Cancel</button>
      <button class="e-btn e-btn-highlight">Done</button>
    </e-dialog-footer-actions>
  </e-dialog-footer>
</e-dialog>
Copy Javascript
Copied to clipboard! 
document.querySelector('.close_btn').addEventListener('click', function() {
  document.querySelector('#dialog-footer').close();
});
<e-dialoghandler class="e-btn" dialog="#dialog-default">
  Open Dialog
</e-dialoghandler>

<e-dialog id="dialog-default" headline="Dialog Title">
  <e-dialog-back-button></e-dialog-back-button>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <p>Aliquam hendrerit turpis quis interdum porttitor. Nam luctus enim eget nibh porta.</p>
</e-dialog>
<e-dialoghandler class="e-btn" dialog="#dialog-image-dark">
  Open Dialog With Dark Cover Image
</e-dialoghandler>

<e-dialog id="dialog-image-dark" headline="Dialog Title">
  <e-dialog-cover src="https://picsum.photos/id/1022/500/250" height="250px" tone="dark"></e-dialog-cover>
  
  <p>Sunt, dolor cupidatat, sunt, velit, laborum dolore incididunt consequat do consequat?</p>
  <p>Esse est reprehenderit exercitation non lorem veniam, anim ullamco ut? Ea qui sit tempor, culpa in laboris tempor voluptate fugiat.</p>
</e-dialog>

<e-dialoghandler class="e-btn" dialog="#dialog-image-light">
  Open Dialog With Light Cover Image
</e-dialoghandler>

<e-dialog id="dialog-image-light" headline="Dialog Title">
  <e-dialog-cover src="https://picsum.photos/id/1020/500/250" height="250px" tone="light"></e-dialog-cover>
  
  <p>Sunt, dolor cupidatat, sunt, velit, laborum dolore incididunt consequat do consequat?</p>
  <p>Esse est reprehenderit exercitation non lorem veniam, anim ullamco ut? Ea qui sit tempor, culpa in laboris tempor voluptate fugiat.</p>
</e-dialog>
<e-dialoghandler class="e-btn" dialog="#dialog-iframe">
  Open Dialog With Iframe
</e-dialoghandler>

<e-dialog class="e-dialog-iframe" id="dialog-iframe" height="300px">
  <iframe src="https://example.com"></iframe>
</e-dialog>

<e-dialoghandler type="button" class="e-btn" dialog="#dialog-iframe-cache">
  Open Dialog With Cached Iframe
</e-dialoghandler>

<e-dialog class="e-dialog-iframe" id="dialog-iframe-cache" height="300px" cache>
  <iframe src="https://example.com"></iframe>
</e-dialog>
<e-dialoghandler class="e-btn" dialog="#dialog-with-action">
  Open Dialog
</e-dialoghandler>

<e-dialog headline="Import Contacts" id="dialog-with-action">
  <e-dialog-action>
    <e-dialog-action-title>
      Create Auto-Import
    </e-dialog-action-title>
    <e-dialog-action-content>
      Set up an automation that fetches a file with a list of contacts from an SFTP or WebDAV folder, to add it to your Emarsys contact database.
    </e-dialog-action-content>
    <e-dialog-action-footer>
      <a class="e-helperlink e-helperlink-nopadding" href="#0" target="_blank">
        <e-icon class="e-helperlink__icon" icon="e-helperlink" size="small"></e-icon>
        <span class="e-helperlink__text">
          Learn more
        </span>
      </a>
    </e-dialog-action-footer>
  </e-dialog-action>

  <e-dialog-action>
    <e-dialog-action-media>
      <e-icon icon="e-file-file" size="middle"></e-icon>
    </e-dialog-action-media>
    
    <e-dialog-action-container>
      <e-dialog-action-title>
        Import File Manually
      </e-dialog-action-title>
      <e-dialog-action-content>
        Upload a file that contains a list of contacts, to add it to your Emarsys contact database.
      </e-dialog-action-content>
      <e-dialog-action-footer>
        <a class="e-helperlink e-helperlink-nopadding" href="#0" target="_blank">
          <e-icon class="e-helperlink__icon" icon="e-helperlink" size="small"></e-icon>
          <span class="e-helperlink__text">
            Learn more
          </span>
        </a>
      </e-dialog-action-footer>
    </e-dialog-action-container>
  </e-dialog-action>

  <e-dialog-action disabled disabled-tooltip="Tooltip content goes here">
    <e-dialog-action-media>
      <e-icon icon="e-file-file" size="middle"></e-icon>
    </e-dialog-action-media>

    <e-dialog-action-container>
      <e-dialog-action-title>
        Action Title Goes Here
        <e-tooltip content="Tooltip content goes here" type="helper"></e-tooltip>
      </e-dialog-action-title>
      <e-dialog-action-content>
        Upload a file that contains a list of contacts, to add it to your Emarsys contact database.
      </e-dialog-action-content>
      <e-dialog-action-footer>
        <a class="e-helperlink e-helperlink-nopadding" href="#0" target="_blank">
          <e-icon class="e-helperlink__icon" icon="e-helperlink" size="small"></e-icon>
          <span class="e-helperlink__text">
            Learn more
          </span>
        </a>
      </e-dialog-action-footer>
    </e-dialog-action-container>
  </e-dialog-action>
</e-dialog>
<div class="e-box" style="position:relative; height: 300px;">
  <e-dialoghandler class="e-btn" dialog="#dialog-local">
    Open Local Dialog
  </e-dialoghandler>

  <e-dialog id="dialog-local" headline="Dialog Title" local>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <p>Aliquam hendrerit turpis quis interdum porttitor. Nam luctus enim eget nibh porta.</p>
  </e-dialog>
</div>
<e-dialoghandler class="e-btn" dialog="#dialog-resize">
  Open Dialog With Custom Size
</e-dialoghandler>

<e-dialog id="dialog-resize" width="50%" height="200px">
  <p>Sunt, dolor cupidatat, sunt, velit, laborum dolore incididunt consequat do consequat?</p>
  <p>Esse est reprehenderit exercitation non lorem veniam, anim ullamco ut? Ea qui sit tempor, culpa in laboris tempor voluptate fugiat.</p>
</e-dialog>
<button class="e-btn on_the_fly">
  Create Dialog On The Fly
</button>
Copy Javascript
Copied to clipboard! 
var dialog = document.createElement('e-dialog')
dialog.addEventListener('dialog.open', function(event) { console.log(event.detail.component); });
dialog.addEventListener('dialog.close', function(event) { console.log(event.detail.component); });

document.querySelector('.on_the_fly').addEventListener('click', function() {
  dialog.open({
    width: '600px',
    height: '200px',
    headline: 'Dialog Title',
    content: 'Consectetur amet dolor, dolor magna consectetur incididunt eu duis. Quis in nostrud sint, reprehenderit eu? Incididunt do tempor sint aute occaecat.',
    noKeys: true,
    buttons: {
      'Cancel': {
        callback: function() {
          this.close();
        },
        className: 'e-flex__item'
      },
      'Reset': {
        action: 'close',
        className: 'e-flex__item'
      },
      'Apply': {
        autofocus: true,
        callback: function() {
          alert('Action');
        },
        className: 'e-btn-primary e-flex__item'
      }
    }
  });
});
<div class="e-buttongroup">
  <a class="e-btn" href="#0" id="floatingPage">
    Open Floating Page
  </a>
  <a class="e-btn" href="#0" id="floatingPageFullHeight">
    Open Full-Height Layout
  </a>
</div>
Copy Javascript
Copied to clipboard! 
document.getElementById('floatingPage').addEventListener('click', function() {
  window.e.utils.openFloatingPage({ url: 'https://designsystem.emarsys.net/' });
});
document.getElementById('floatingPageFullHeight').addEventListener('click', function() {
  window.e.utils.openFloatingPage({ url: 'https://designsystem.emarsys.net/' });
});
<div class="e-buttongroup">
  <a class="e-btn" href="#0" id="consequentialDialog">
    Open Consequential Dialog
  </a>
</div>
Copy Javascript
Copied to clipboard! 
document.getElementById('consequentialDialog').addEventListener('click', function() {
  window.e.utils.openConsequentialConfirmationDialog({
    headline: 'Launch Campaign Now?',
    content: 'The email will be sent to an estimated 8 123 382 contacts.',
    confirm: {
      label: 'Launch',
      callback() {
        console.log('Confirm clicked');
      }
    },
    cancel: {
      label: 'Cancel',
      callback() {
        console.log('Cancel clicked');
      }
    }
  });
});
<div class="e-buttongroup">
  <a class="e-btn" href="#0" id="destructiveDialog">
    Open Destructive Dialog
  </a>
</div>
Copy Javascript
Copied to clipboard! 
document.getElementById('destructiveDialog').addEventListener('click', function() {
  window.e.utils.openDestructiveConfirmationDialog({
    headline: 'Delete This?',
    content: 'Once deleted, it cannot be accessed anymore.',
    confirm: {
      label: 'Delete',
      callback() {
        console.log('Delete clicked');
      }
    },
    cancel: {
      label: 'Cancel',
      callback() {
        console.log('Cancel clicked');
      }
    }
  });
});
<div class="e-buttongroup">
  <a class="e-btn" href="#0" id="newDialog">
    Open Custom Dialog
  </a>
</div>
Copy Javascript
Copied to clipboard! 
const dialogNode = document.createElement('div');
dialogNode.innerHTML = `
  <div class="e-dialog__header">Dialog Title</div>
  <div class="e-dialog__content">Dialog content goes here.</div>
  <div class="e-dialog__footer">
    <button class="e-btn">Cancel</button>
  </div>
`;

let dialog;

document.getElementById('newDialog').addEventListener('click', function() {
  dialog = window.e.utils.dialog({ content: dialogNode });
  dialog.open();
});

dialogNode.querySelector('.e-btn').addEventListener('click', function() {
  dialog.close();
});
<e-dialoghandler class="e-btn" dialog="#dialog-first">
  Open Multi-step Dialog
</e-dialoghandler>

<e-dialog id="dialog-first" headline="First Dialog">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <p>Aliquam hendrerit turpis quis interdum porttitor. Nam luctus enim eget nibh porta.</p>
  <e-dialog-footer>
    <e-dialog-footer-actions>
      <button class="e-btn e-btn-highlight" id="next-button" onclick="onNextClick()">Next</button>
    </e-dialog-footer-actions>
  </e-dialog-footer>
</e-dialog>

<e-dialog id="dialog-second" headline="Second Dialog">
  <e-dialog-back-button id="back-button" onclick="onBackClick()"></e-dialog-back-button>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <p>Aliquam hendrerit turpis quis interdum porttitor. Nam luctus enim eget nibh porta.</p>
</e-dialog>
Copy Javascript
Copied to clipboard! 
const firstDialog = document.querySelector("#dialog-first");
const secondDialog = document.querySelector("#dialog-second");
const nextButton = document.querySelector("#next-button");
const backButton = document.querySelector("#back-button");

function onNextClick() {
  firstDialog.close();
  secondDialog.open();
}

function onBackClick() {
  firstDialog.open();
  secondDialog.close();
}