Unable to get rid of custom popup | XM Community
Skip to main content
Solved

Unable to get rid of custom popup

  • January 22, 2025
  • 1 reply
  • 28 views

Forum|alt.badge.img+2

On some pages of a survey, I have created a popup using javascript as per the code below. The problem is that this popup option ("Review Instructions") appears on subsequent pages of the survey as well, even though those pages do not have any javascript code. How do I get rid of it on subsequent pages? Thanks!

Qualtrics.SurveyEngine.addOnload(function() {

var instructionsText = ` ….some text …. 
    `;

    // Function to show the popup with instructions
    function showInstructions() {
        var popup = document.createElement("div");
        popup.style.position = "fixed";
        popup.style.width = "80%";
        popup.style.height = "60%";
        //...(more design aspects)

        var closeButton = document.createElement("button");
        closeButton.innerHTML = "Close";
        closeButton.style.marginTop = "10px";
        closeButton.onclick = function() {
            document.body.removeChild(popup);
        };

        popup.innerHTML = instructionsText;
        popup.appendChild(closeButton);
        document.body.appendChild(popup);
    }

    // Add a button to trigger the popup
    var instructionsButton = document.createElement("button");
    instructionsButton.innerHTML = "Review Instructions";
    instructionsButton.onclick = showInstructions;

    // Style the button to position it near the top center of the page
    instructionsButton.style.position = "fixed";
    instructionsButton.style.top = "20px";
    instructionsButton.style.left = "50%";
    instructionsButton.style.transform = "translateX(-50%)";
    instructionsButton.style.zIndex = "1000";
    instructionsButton.style.padding = "12px 20px"; // Make the button box larger
    instructionsButton.style.fontSize = "16px"; // Increase the font size

});

Qualtrics.SurveyEngine.addOnUnload(function() {
    
    // Remove the button when navigating away from this page
    if (this.instructionsButton) {
        this.instructionsButton.remove();
    }
    

});

Best answer by ahmedA

Give your instruction button an id and then delete it by searching via id on clicking the next button.

View original

1 reply

Forum|alt.badge.img+22
  • Level 7 ●●●●●●●
  • 2028 replies
  • Answer
  • January 23, 2025

Give your instruction button an id and then delete it by searching via id on clicking the next button.


Leave a Reply