stephen-smith of Speak Creative
11/6/2019 - 1:44 PM

Conditional Popup / Blocks

This is how you can set a matrix to be conditional based on a checkbox that the client can set on and off. In this particular example, a popup was set in the sitewide content to replace the standard code popup that client's currently use. The most important part is setting the checkbox field, then included this if statement:

{% if Module.FieldValues.Active == 1 %}

{% endif %}

This conditional statement just checks to see if the checkbox is turned on ( the true value outputs 1 in the code realm).

There is also some styling included & the Jquery function that allows you to toggle the active class on the button used to close out of the popup.

Matrix Code
content_copyfile_download
{% if Module.FieldValues.Active == 1 %}
<div class="page-alert page-alert-message active">
    <div class="page-alert-image" style="background:url({{Module.FieldValues.Image}}); background-size:cover; background-position:center;"></div>
	<div class="page-alert-content">
	    <div class="text-section">
	    	<h1>{{Module.FieldValues.Headline}}</h1>
		    <p>{{Module.FieldValues.Description}}</p>
		</div>
		<div class="button-section">
		    <a class="btn" href="{{Module.FieldValues.ButtonUrl}}">{{Module.FieldValues.ButtonText}}</a>
		</div>
	</div>
	<div class="controls"><span id="page-alert-dismiss">X<span></div>
</div>
{% endif %}
Jquery Function
content_copyfile_download
  /*==========================================================================
  Page Alert JS
  ========================================================================== */

  $(document).ready(function() {
    $("#page-alert-dismiss").click(function() {    
      $(".page-alert-message").toggleClass("active");
    });
    })
CSS Styling Example
content_copyfile_download
.page-alert-message.active {

display:flex;

}

.page-alert-message, .page-alert {
    background-color: #FFF;
    border: none;
    border-radius: 0;
    color: black;
    left: 50%;
    position: fixed;
    text-align: left;
    transform: translate(-50%, -50%);
    top: 55%;
    max-height: 100%;
    min-width: 890px;
    max-width: 100%;
    z-index: 1001;
    padding: 0;
    margin-left: 0;
    width: 50vw;
    box-shadow: 0 0 70px rgba(0, 0, 0, 0.6588235294117647);
    display:none;


    .page-alert-image {
        width: 50%;
        overflow: hidden;
    }

    .page-alert-content {
        width: 50%;
        text-align:center;
        padding: 40px;
    }

    h1 {
        font-weight:700;

    }

    p {
        font-size:2rem;

        &:after {
            content:'';
            width:30px;
            color:grey;
            position:absolute;
            bottom:0;
        }
    }
  
      @media (max-width: 1000px) {
          width: 75vw;
      }
      @media (max-width: 768px) {
          width: 100vw;
          top: 290px;
          min-width:80px;
          transform: none;
          top: auto;
          left:auto;
          bottom:0;
          background-color: #1a437b;

        .page-alert-content {
            width: 100%;

            h1, p {
                color:white;
            }

            p {
                font-weight: 500;
            }

            .btn {
                background: #c04849;

                &:hover {
                background: #d04d4e;
                }
            }
        }

        .page-alert-image {
           display:none;
        }
          p {
            line-height:2.2rem;
            a {
              margin-top:0;
            }
          }        
          h2 {
            line-height:3rem;
          }
          h2 img {
          width: 220px !important;
          margin: 0 !important;
        }
      }
  
      .controls {
        margin: 0;
        position: absolute;
        top: -8px;
        right: -20px;
        cursor:pointer;

        span#page-alert-dismiss {
            text-align: center;
            border: none;
            background: $blue-light;
            box-shadow: 0 5px 10px rgba(0,0,0,.4);
            color: white;
            padding: 1.5rem 1.8rem;
            line-height: 0;
            border-radius: 50%;
            opacity: 1;
            width: 50px;
            height: 50px;
        }
    }
  }