Assistance with Pop-Up Modal on Password Page Not Loading Terms of Service on Mobile

[newgoodera]

Hello,

I’m currently facing an issue with a pop-up modal on the password page of my website. The modal is designed to display the Terms of Service while also collecting emails.

The modal works correctly on desktop browsers, where it successfully fetches and displays content from a specific URL. However, on mobile browsers, the modal does not seem to load the content. If anyone had any better suggestions to accomplish adding terms of service to the password page, or another workaround I'd appreciate it!

1. Is ('.shopify-policy__body') the correct descriptor to fetch content from the TOS? 

2. I've tried to add a delay experiment with adding a delay or using a callback or event listener to wait for the content to be fully loaded before attempting to extract and display it in the modal. That did not work either.

(It would be nice if Shopify themselves integrated terms of service to the password page in the password page management area)

Website URL: gooderabrand.com/password

Here’s a snapshot of the code base I am working with:

 

HTML:

 <!-- Trigger Button -->
<p class="terms-link">
    <a href="#!" id="termsTrigger">TERMS AND CONDITIONS</a>
</p>

<!-- Modal Structure -->
<div id="myModal" class="modal">
    <div class="modal-content">
        <span class="modal-close" id="modalCloseBtn">&times;</span>
        <h2>TERMS OF SERVICE</h2>
        <div id="dynamicContent"><!-- Dynamic content will load here --></div>
    </div>
</div>

JavaScript (with Touch Events):

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function() {
        $("#termsTrigger").on("click touchstart", function(e) {
            e.preventDefault();
            $.ajax({
                url: "https://gooderabrand.com/policies/terms-of-service",
                type: 'GET',
                success: function(data) {
                    var content = $(data).find('.shopify-policy__body').html();
                    if (content) {
                        $("#dynamicContent").html(content);
                    } else {
                        $("#dynamicContent").html("Content could not be loaded.");
                    }
                    $("#myModal").css("display", "block");
                    setTimeout(function(){
                        $("#myModal").css("opacity", "1");
                    }, 100);
                },
                error: function(xhr, status, error) {
                    $("#dynamicContent").html("An error occurred while loading the content.");
                }
            });
        });

        $("#modalCloseBtn, #myModal").on("click touchstart", function(e) {
            if (e.target.id === "modalCloseBtn" || e.target.id === "myModal") {
                $("#myModal").css("opacity", "0");
                setTimeout(function(){
                    $("#myModal").css("display", "none");
                }, 300);
            }
        });
    });
</script>

CSS:

/* Modal Base Styles */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(22, 22, 23, 0.88);
    overflow: auto;
    opacity: 0; 
    transition: opacity 0.3s ease; 
}

.modal-content {
    position: fixed;
    text-align: left; 
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px); 
    color: white;
    width: 80%;
    max-width: 600px;
    max-height: 70vh;
    overflow-y: auto;
    border-radius: 10px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); 
    box-sizing: border-box; 
}

.modal-close {
    color: #aaa;
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 10px;
    font-size: 28px;
    cursor: pointer;
}

/* Media Queries */
@media (max-width: 768px) {
    .modal-content {
        top: 10%; 
        width: 95%; 
        padding: 10px; 
    }
    
    .modal-close {
        font-size: 22px; 
    }
}

[newgoodera · Accepted solution]

I ended up directly embedding the content within the pop up modal eliminating the need for an AJAX request, which simplifies the code and avoids potential issues related to content retrieval from an external source. I still think Shopify should work to integrate terms of service to all pages users could potentially access - especially - on password protected pages.