<div class="modal-overlay is-active js-modal-overlay">
<div class="modal js-modal">
<div class="modal__inner">
<button class="btn btn--close js-btn-close">
<svg class="icon icon--close">
<use xlink:href="/assets/icons/sprite-sheet.svg#close"></use>
</svg>
<span class="visually-hidden">Close Menu</span>
</button>
<div class="modal__content">
<h3 class="heading-medium">Love Discount Tickets?</h3>
<div class="newsletter-modal">
<div class="newsletter-modal__item newsletter-modal__signup">
<div class="js-newsletter-modal-copy">
<div class="newsletter-icon">
<svg class="icon icon--article">
<use xlink:href="/assets/icons/sprite-sheet.svg#article"></use>
</svg>
</div>
<span class="newsletter-signup">Sign up and get additional deals.</span>
<span class="newsletter-signup-copy">Be the first to find out about great discounts and the latest news for your favorite shows.</span>
</div>
<div class="newsletter-form-container js-newsletter-form-container">
<div class="newsletter-confirmation visually-hidden js-newsletter-confirmation">
<svg class="icon icon--checkmark">
<use xlink:href="/assets/icons/sprite-sheet.svg#checkmark"></use>
</svg>
<div class="newsletter-confirmation__info">
<p>Thank you for signing up. We'll send you a welcome message shortly.</p>
<p class="newsletter-customize">You can <a href="#">customize your preferences </a>at any time.</p>
</div>
</div>
<form class="newsletter-form js-newsletter-form">
<div class="newsletter-error visually-hidden js-newsletter-error">
<svg class="icon icon--error">
<use xlink:href="/assets/icons/sprite-sheet.svg#error"></use>
</svg>
<span class="input-error">Please enter a valid email address.</span>
</div>
<div class="form-input">
<div class="validation js-validation">
<label for="modal-email" class="label label--required visually-hidden">Email Address</label>
<input type="email" name="email" id="modal-email" class="input validation-item js-newsletter-input" placeholder="Enter your email address">
</div>
</div>
<button class="btn btn--base btn--cta js-newsletter-btn">
Sign Up
</button>
</form>
</div>
</div>
<div class="newsletter-modal__item newsletter-modal__continue">
<div class="js-newsletter-modal-copy">
<div class="newsletter-icon">
<svg class="icon icon--tickets">
<use xlink:href="/assets/icons/sprite-sheet.svg#tickets"></use>
</svg>
</div>
<span class="newsletter-signup-copy">Skip sign up, and get tickets now.</span>
</div>
<a href="#" class="btn btn--base btn--cta">Continue to telecharge.com</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-overlay {{class}} js-modal-overlay">
<div class="modal js-modal">
<div class="modal__inner">
{{render '@buttons--close'}}
<div class="modal__content">
<h3 class="heading-medium">{{title}}</h3>
<div class="newsletter-modal">
<div class="newsletter-modal__item newsletter-modal__signup">
<div class="js-newsletter-modal-copy">
<div class="newsletter-icon">
{{render '@icons--article'}}
</div>
<span class="newsletter-signup">{{signup-first}}</span>
<span class="newsletter-signup-copy">{{signup-copy}}</span>
</div>
{{render '@newsletter' newsletter-modifiers merge=true}}
</div>
<div class="newsletter-modal__item newsletter-modal__continue">
<div class="js-newsletter-modal-copy">
<div class="newsletter-icon">
{{render '@icons--tickets'}}
</div>
<span class="newsletter-signup-copy">{{continue-copy}}</span>
</div>
<a href="#" class="btn btn--base btn--cta">{{continue-link}}</a>
</div>
</div>
</div>
</div>
</div>
</div>
{
"class": "is-active",
"title": "Love Discount Tickets?",
"signup-first": "Sign up and get additional deals.",
"signup-copy": "Be the first to find out about great discounts and the latest news for your favorite shows.",
"signup-list": [
{
"copy": "Great discounts to popular shows."
},
{
"copy": "The latest news for your favorite shows."
}
],
"continue-copy": "Skip sign up, and get tickets now.",
"continue-link": "Continue to telecharge.com",
"newsletter-modifiers": {
"emailModifiers": {
"label": true,
"input-id": "modal-email",
"modifiers": {
"hidden-class": "visually-hidden",
"id": "modal-email"
}
}
}
}
.newsletter-modal {
@include breakpoint($break-medium) {
display: flex;
justify-content: space-between;
}
}
.newsletter-modal__item {
flex: 0 1 46%;
}
.newsletter-signup-copy {
display: block;
line-height: $line-height;
.newsletter-modal__continue & {
margin-bottom: 1.5rem;
}
}
.newsletter-modal__signup {
margin-bottom: 2.5rem;
@include breakpoint($break-medium) {
margin: 0;
padding: 0 4% 0 0;
border-right: 1px solid $color-border;
}
}
.input {
.newsletter-modal & {
@include breakpoint($break-medium) {
margin: 0 auto;
width: auto;
min-width: 15.63rem;
}
}
}
.form-input {
.newsletter-modal & {
margin-bottom: 1.25rem;
}
}
.signup-list-item {
padding-left: 0;
}
.newsletter-modal__item {
align-self: center;
text-align: center;
}
.btn:hover {
.newsletter-modal & {
transform: none;
}
}
.newsletter-icon {
display: inline-block;
border: 2px solid $color-secondary;
border-radius: 3rem;
margin-bottom: 1.25rem;
}
.icon {
.newsletter-icon & {
padding: 1rem;
width: 2.25rem;
height: 2.25rem;
stroke: $color-secondary;
}
}
.newsletter-signup {
display: block;
margin-bottom: 1rem;
font-weight: $font-bold;
}
A demo of the modal appearing can be seen on the Show Page view when clicking the ‘Regular Tickets’ button.