Generic Modal 

<div class="generic-modal generic-modal--is-warning js-modal js-modal-id-">
    <div class="generic-modal__inner">
        <div class="grid-container">
            <div class="grid-x grid-padding-x align-center">
                <div class="cell medium-offset-1 medium-6 vertical-align">
                    <div class="generic-modal__container">
                        <a href="#" class="generic-modal__close-button js-close-modal js-close-cross-modal"></a>
                        <div class="generic-modal__icon"><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>
                                <path fill-rule='evenodd' clip-rule='evenodd' d='M12 3c.598 0 1.15.319 1.448.836l8.328 14.424a1.672 1.672 0 01-1.448 2.509H3.672a1.672 1.672 0 01-1.448-2.509l8.328-14.424C10.85 3.32 11.402 3 12 3zm0 1.672L3.672 19.096h16.656L12 4.672zm.001 10.034a.836.836 0 01-.836-.836V9.69a.836.836 0 011.673 0v4.18a.836.836 0 01-.837.836zm0 .837a.836.836 0 100 1.672.836.836 0 000-1.672z' />
                            </svg></div>
                        <h3 class="generic-modal__title">Are you sure you want to delete your account?</h3>
                        <p class="generic-modal__subtitle">This will completely remove and delete your account and all associated data permanently. <strong>This cannot be undone.</strong></h2>
                        <ul class="generic-modal__buttons">
                            <li> <a href="#" class="button-p2 button-p2--with-icon js-close-modal " role="button" target="_self">No, please keep my account</a>
                            </li>
                            <li> <a href="#" class="button-p2 button-p2--warning js-confirm-button disabled" role="button" target="_self">Yes, Delete my acccount</a>
                            </li>
                            </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
 
<div class="generic-modal{{#if isWarning}} generic-modal--is-warning{{/if}} js-modal js-modal-id-{{id}}">
    <div class="generic-modal__inner">
        <div class="grid-container">
            <div class="grid-x grid-padding-x align-center">
                <div class="{{#if isWarning}}cell medium-offset-1 medium-6 vertical-align{{/if}}">
                    <div class="generic-modal__container">
                        <a href="#" class="generic-modal__close-button js-close-modal js-close-cross-modal"></a>
                        {{#if icon}}<div class="generic-modal__icon">{{{ icon }}}</div>{{/if}}
                        {{#if title}}<h3 class="generic-modal__title">{{ title }}</h3>{{/if}}
                        {{#if subtitle}}<p class="generic-modal__subtitle">{{{ subtitle }}}</h2>{{/if}}
                        <ul class="generic-modal__buttons">
                            {{#if cancelButton}}<li>{{> @cp-button-secondary target=cancelButton.target url=cancelButton.url text=cancelButton.text modifier="with-icon" cssClasses="js-close-modal" }}</li>{{/if}}
                            {{#if confirmButton}}<li>{{> @cp-button-secondary target=confirmButton.target url=confirmButton.url text=confirmButton.text modifier="warning" disabled="true" cssClasses="js-confirm-button"}}</li>{{/if}}
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
 
{
  "isWarning": true,
  "title": "Are you sure you want to delete your account?",
  "subtitle": "This will completely remove and delete your account and all associated data permanently. <strong>This cannot be undone.</strong>",
  "icon": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill-rule='evenodd' clip-rule='evenodd' d='M12 3c.598 0 1.15.319 1.448.836l8.328 14.424a1.672 1.672 0 01-1.448 2.509H3.672a1.672 1.672 0 01-1.448-2.509l8.328-14.424C10.85 3.32 11.402 3 12 3zm0 1.672L3.672 19.096h16.656L12 4.672zm.001 10.034a.836.836 0 01-.836-.836V9.69a.836.836 0 011.673 0v4.18a.836.836 0 01-.837.836zm0 .837a.836.836 0 100 1.672.836.836 0 000-1.672z'/></svg>",
  "cancelButton": {
    "text": "No, please keep my account",
    "target": "_self",
    "url": "#"
  },
  "confirmButton": {
    "text": "Yes, Delete my acccount",
    "target": "_self",
    "url": "#"
  }
}

There are no notes for this item.