SP Modal pop up issue

arshad199110
Tera Contributor

I use the below script for onload pop up. Issue is when we use the browser go back button to go to previous page, the pop up stays up and doesn't close until we refresh the page or click any button on spmodal to close. How to close this pop up when previous pages are redirected?

arshad199110_0-1703480942978.png

arshad199110_1-1703481106116.png

 

 



function onLoad() {
 
spModal.open({
title: 'Disclaimer:',
message: 'test acknowledgement',
backdrop: 'static',
size: "md",
buttons: [
{label:'I Acknowledge', primary: true},
{label:'Cancel', primary: true},
]
}).then(function(ans){
if (ans.label == "I Acknowledge"){
//alert('party');
 
else{
location.href="sp?id=sc_category";
}
 
});
 
var checkExist = setInterval(function() {
if (top.document.getElementsByClassName('close pull-right')[0]) {
clearInterval(checkExist);
var x = top.document.getElementsByClassName('close pull-right')[0];
x.style.display = "none";
}
}, 100); // check every 100ms
1 ACCEPTED SOLUTION

Iraj Shaikh
Mega Sage
Mega Sage

Hi @arshad199110 

To address the issue of the pop-up not closing when navigating back to the previous page using the browser's back button, you can add an event listener for the `popstate` event on the `window` object. The `popstate` event is fired when the active history entry changes, which includes when the user clicks the browser's back button.

Here's how you can modify your `onLoad` function to close the modal when the `popstate` event is triggered:

 

function onLoad() {
    // Open the modal
    var modalInstance = spModal.open({
        title: 'Disclaimer:',
        message: 'test acknowledgement',
        backdrop: 'static',
        size: "md",
        buttons: [
            {label:'I Acknowledge', primary: true},
            {label:'Cancel', primary: true},
        ]
    }).then(function(ans){
        if (ans.label == "I Acknowledge"){
            // Acknowledged action
        } else {
            location.href="sp?id=sc_category";
        }
    });

    // Hide the close button
    var checkExist = setInterval(function() {
        if (top.document.getElementsByClassName('close pull-right')[0]) {
            clearInterval(checkExist);
            var x = top.document.getElementsByClassName('close pull-right')[0];
            x.style.display = "none";
        }
    }, 100); // check every 100ms

    // Add event listener for popstate event
    window.addEventListener('popstate', function(event) {
        // Close the modal when the user navigates back
        if (modalInstance && modalInstance.dismiss) {
            modalInstance.dismiss();
        }
    });
}

 

In this code, we store the result of `spModal.open` in a variable `modalInstance`. This object should have a method to close or dismiss the modal, which is typically called `dismiss` or `close`. When the `popstate` event is triggered, we call this method to close the modal.

Ensure that the `modalInstance` variable is accessible within the scope of the `popstate` event handler. If the modal plugin you're using does not provide a way to programmatically close the modal, you may need to trigger a click event on the modal's close button or overlay as a workaround.

Please mark this response as correct or helpful if it assisted you with your question.

View solution in original post

2 REPLIES 2

Iraj Shaikh
Mega Sage
Mega Sage

Hi @arshad199110 

To address the issue of the pop-up not closing when navigating back to the previous page using the browser's back button, you can add an event listener for the `popstate` event on the `window` object. The `popstate` event is fired when the active history entry changes, which includes when the user clicks the browser's back button.

Here's how you can modify your `onLoad` function to close the modal when the `popstate` event is triggered:

 

function onLoad() {
    // Open the modal
    var modalInstance = spModal.open({
        title: 'Disclaimer:',
        message: 'test acknowledgement',
        backdrop: 'static',
        size: "md",
        buttons: [
            {label:'I Acknowledge', primary: true},
            {label:'Cancel', primary: true},
        ]
    }).then(function(ans){
        if (ans.label == "I Acknowledge"){
            // Acknowledged action
        } else {
            location.href="sp?id=sc_category";
        }
    });

    // Hide the close button
    var checkExist = setInterval(function() {
        if (top.document.getElementsByClassName('close pull-right')[0]) {
            clearInterval(checkExist);
            var x = top.document.getElementsByClassName('close pull-right')[0];
            x.style.display = "none";
        }
    }, 100); // check every 100ms

    // Add event listener for popstate event
    window.addEventListener('popstate', function(event) {
        // Close the modal when the user navigates back
        if (modalInstance && modalInstance.dismiss) {
            modalInstance.dismiss();
        }
    });
}

 

In this code, we store the result of `spModal.open` in a variable `modalInstance`. This object should have a method to close or dismiss the modal, which is typically called `dismiss` or `close`. When the `popstate` event is triggered, we call this method to close the modal.

Ensure that the `modalInstance` variable is accessible within the scope of the `popstate` event handler. If the modal plugin you're using does not provide a way to programmatically close the modal, you may need to trigger a click event on the modal's close button or overlay as a workaround.

Please mark this response as correct or helpful if it assisted you with your question.

Thank you.!