Code to hide an element if this element is inside a modal

Custom Coding
, ,
1

Some pages, in many apps, can be opened in a tab or in a modal, depending of the user journey you created.

For example:

  1. you have one page opening a list details page in the same tab
  2. you have a second page opening the same list details page, but this time in a modal

Some elements (for example a “go back” button) should not appear when the page is opened in a modal.

Here is the code to insert in the page settings => custom code => footer

Just change cta1 by the id/name of your block

<script>
    var currentPageUrl = window.location.href;
    if (currentPageUrl.indexOf('&viewMode=modal') !== -1) {
        document.getElementById('cta1').style.display = 'none';
    } else {
        document.getElementById('cta1').style.display = 'block';
    }
</script>

If you have multiple elements to hide, here is the logic to apply:

<script>
    var currentPageUrl = window.location.href;

    function showOrHideElement(elementId) {
        if (currentPageUrl.indexOf('&viewMode=modal') !== -1) {
            document.getElementById(elementId).style.display = 'none';
        } else {
            document.getElementById(elementId).style.display = 'block';
        }
    }

    showOrHideElement('cta1');
    showOrHideElement('cta2');
    showOrHideElement('cta3');
</script>