PHP
<!-- Modal Buttons -->
<a href="#" class="button" data-modals="modal_cart_add">Modal Add to Cart</a>
<a href="#" class="button" data-modals="modal_variation">Modal Variation</a>
<!-- modal_cart_add -->
<div class="image_wrap">
<?= svg('iconShoppingBag6','zoomIn') ?>
</div>
<div class="modal_text">
<div class="modal_image">
<img src="/img/product1.png" alt="Hayward Aquavac 600 robotic pool cleaner with caddy">
</div>
<p>Hayward Aquavac 600 robotic pool cleaner with caddy successfully added to your cart</p>
</div>
<div class="modal_buttons || modal_buttons_column">
<button type="button" class="button || button_disable || dialog_close">Continue Shopping</button>
<a href="#" class="button">View Cart</a>
</div>
<!-- modal_variation -->
<div class="image_wrap">
<?= svg('iconShoppingBag6','zoomIn') ?>
</div>
<div class="modal_text">
<h3 class="modal_title">Please Select Option</h3>
</div>
<div class="variation_block">
<div class="input_block">
<span>Size</span>
<label class="label_select">
<select name="state" class="input">
<option value="S">S</option>
<option value="M">M</option>
<option value="L">L</option>
</select>
</label>
</div>
<p class="price">$60.00</p>
</div>
<div class="modal_buttons || modal_buttons_column">
<button type="button" class="button || button_disable || dialog_close">Cancel</button>
<a href="#" class="button">Add to cart</a>
</div>CSS
/* modal_cart_add */
.modal_cart_add.dialog{padding:2rem 2.5rem 3rem;max-width:49rem}
.modal_cart_add.dialog .modal_image{position:relative;overflow:hidden;padding-top:15rem;width:15rem;margin:0 auto 1.5rem}
.modal_cart_add.dialog .modal_image img{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:100%;height:100%;-o-object-fit:contain;object-fit:contain;font-family:'object-fit: contain;\A '}
.modal_cart_add.dialog .modal_buttons{max-width:45rem}
@media only screen and (max-width: 550px) {
.dialog .modal_buttons.modal_buttons_column .button{width:100%;margin:0 0 1.5rem}
.dialog .modal_buttons.modal_buttons_column .button:last-child{margin:0}
}
/* modal_variation */
.modal_variation.dialog .variation_block{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-moz-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-moz-box-pack:center;-ms-flex-pack:center;justify-content:center;margin:1.5rem 0 0}
.modal_variation.dialog .variation_block .input_block{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-moz-box-align:center;-ms-flex-align:center;align-items:center;margin:0 1.5rem 0 0}
.modal_variation.dialog .variation_block .input_block span{display:inline-block;margin:0 1.5rem 0 0}
.modal_variation.dialog .variation_block .label_select::after{top:30%}
.modal_variation.dialog .variation_block .label_select select{height:3rem;margin:0}
.modal_variation.dialog .variation_block .price{font-size:1.6rem;font-weight:600;color:#09a5be;margin:0}SCSS
/* Vars */
$main: #09a5be;
/* modal_cart_add */
.modal_cart_add.dialog {
padding: 2rem 2.5rem 3rem;
max-width: 49rem;
.modal_image {
position: relative;
overflow: hidden;
padding-top: 15rem;
width: 15rem;
margin: 0 auto 1.5rem;
img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
object-fit: contain;
font-family: 'object-fit: contain;';
}
}
.modal_buttons {
max-width: 45rem;
}
}
@media only screen and (max-width: 550px) {
.dialog .modal_buttons.modal_buttons_column .button {width: 100%;margin: 0 0 1.5rem;}
.dialog .modal_buttons.modal_buttons_column .button:last-child {margin: 0;}
}
/* modal_variation */
.modal_variation.dialog {
.variation_block {
display: flex;
align-items: center;
justify-content: center;
margin: 1.5rem 0 0;
.input_block {
display: flex;
align-items: center;
margin: 0 1.5rem 0 0;
span {
display: inline-block;
margin: 0 1.5rem 0 0;
}
}
.label_select {
&::after {
top: 30%;
}
select {
height: 3rem;
margin: 0;
}
}
.price {
font-size: 1.6rem;
font-weight: 600;
color: $main;
margin: 0;
}
}
}JavaScript
if (type == 'modal_cart_add') {
$('.dialog').addClass('modal_cart_add');
}
if (type == 'modal_variation') {
$('.dialog').addClass('modal_variation');
}