html 矩阵模态弹出框架饼干

Posted 2021-05-10

<div id="popup">
   <span class="close-popup"></span>
   <div class="content">
        {{ Module.FieldValues.BodyContent }}
        <div class="image-ctas">
            {{ Module.FieldValues.ImageCtas }}
        </div>
   </div>
   <div class="read-more-cta">
        <a class="btn" href="{{ Module.FieldValues.CtaLinkUrl }}">{{ Module.FieldValues.CtaText }}</a>
   </div>
</div>

<script>
   // this contains a doc.ready and does not need to be wrapped again in it
 
(function($){
  var jQuery = $;
 
  $(window).unload(function(e) {
		e.preventDefault();
		//$(".exit-modal").modal();
	});
 
  $(document).ready(function() {
    var newsletterCookie = getCookie("showCustomPopup");
 
    if (newsletterCookie != "seen") {
      $("#popup").addClass("active");
      $(".body-overlay").addClass("active");
    }
 
    $('.close-popup, .read-more-cta a.btn').on('click', function(e){
 
      var popupModal = $(document).find("#popup");
      var classes = $("#popup").attr("class");
 
  
      // if user clicks to hide our popup
      createCookie("showCustomPopup", "seen", {{ Module.FieldValues.DaysUntilPopUpAgain }});
      
 
      $('#popup').addClass("inactive");
      $(".body-overlay, #popup").removeClass("active");
    });
 
    function createCookie(name, value, days) {
      var date, expires;
 
    	if (days) {
    		date = new Date();
    		date.setTime(date.getTime()+(days*24*60*60*1000));
    		expires = "; expires="+date.toGMTString();
    	} else {
    		expires = "";
    	}
 
    	document.cookie = name+"="+value+expires+"; path=/";
    }
 
    function getCookie(cname) {
  	    var name = cname + "=";
  	    var decodedCookie = decodeURIComponent(document.cookie);
  	    var ca = decodedCookie.split(';');
  	    for(var i = 0; i <ca.length; i++) {
  	        var c = ca[i];
  	        while (c.charAt(0) === ' ') {
  	            c = c.substring(1);
  	        }
  	        if (c.indexOf(name) === 0) {
  	            return c.substring(name.length, c.length);
  	        }
  	    }
  	    return "";
  	}
 
 
  });
})(jQ171);

</script>

// custom popup


#popup {
	position: fixed;
	display: block;
	background: white;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 3rem;
	padding-bottom: 0;
	width: 800px;
	max-width: 90vw;
	box-shadow: 0 5px 10px rgba(0,0,0,.3);
    opacity: 0;
    z-index: -1;
    visibility: hidden;
	max-height: 90vh;
	overflow: hidden;
	overflow-y: auto;
	@media (min-width: 767px) {
	}
	
	.close-popup { 
		&:before {
			content: '\f00d';
			font-family: fontawesome;
			font-size: 30px;
			position: absolute;
			line-height: 50px;
			right: 1rem;
			top: 1rem;
			width: 50px;
			height: 50px;
			text-align: center;
			cursor: pointer;
			transform: rotate(0deg) scale(1);
			transition: all .33s ease;
			text-shadow: 0 0 0 rgba(0,0,0,.0);
		}
		&:hover::before {
			transform: rotate(360deg) scale(1.25);
			text-shadow: 0 0px 5px rgba(0,0,0,.5);
			color: #D88E18;
		}
		
	}
	.content {
		margin-bottom: 8rem;
		@media (max-width: 767px) {
			margin-bottom: 0;
		}
		.image-ctas {
			p {
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				justify-content: space-between;
				@media (max-width: 767px) {
					justify-content: space-evenly;
				}
				a, 
				> img {
					@media (max-width: 767px) {
						flex-basis: 45%;
					}
					margin-bottom: 10px;
					height: 150px;
					flex-basis: 30%;
					display: flex;
					flex-direction: column;
					align-content: center;
					justify-content: center;
					transform: scale(1);
					transition: all .33s ease;
					background: white;
					box-shadow: 0 3px 5px rgba(216, 142, 24, .1);
					&:hover {
						z-index: 1;
						box-shadow: 0 5px 15px rgba(216, 142, 24, .4);
						transform: scale(1.05);
					}
				}
			}
		}
	}
	.read-more-cta {
		@media (max-width: 767px) {
			text-align: center;
		}
		@media (min-width: 767px) {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 800px;
			max-width: 90vw;
			height: 75px;
			a {
				display: block!important;
				margin-bottom: 0!important;
				width: 100%;
				height: 75px;
				line-height: 50px!important;
				font-size: 16px!important;
			}
		}
		
	}
	@keyframes breakingnews {
		0% {
			opacity: 0;
            top: 0%;
            visibility: hidden;
            z-index: -1;
		}
		25% {
			top: 50%;
		}
		50% {
			top: 35%;
		}
		75% {
			top: 50%;
		}
		100% {
            opacity: 1;
            visibility: visible;
            z-index: 99999;
		}
	}
	
	&.active {
		animation: breakingnews 2s ease-in-out;
		animation-fill-mode: forwards;
        animation-delay: .66s;
	}
	&.inactive {
		animation: go-away .33s ease;
		animation-fill-mode: forwards;
		animation-delay: 0s;
	}
	@keyframes go-away {
		0% {
			top: 50%;
			opacity: 1;
		}
		50% {
			top: 100%;
			opacity: 0;
		}
		100% {
			opacity: 0;
			display: none;
			z-index: -1;
			visibility: hidden;
		}
	}
}

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css?ckcachebust=580054226">