Popup message to show in REST

Question

I have done some reports using REST Services to fetch data from share point and displaying HTML Table. But want display popup message after finish my result. I have multiple functions in my program and I am not sure how to do a popup message.

Could you please help me with this.

function GetAllListFromSubsite() 
{

            $("#tblListDatta").append(loadImage1);
            var table = document.getElementById('tblListDatta');
            while (table.rows.length > 1) {
            table.deleteRow(1);
            }

    var note=''; 
    var Title;
    var RecordOwner;
    var Title;
    var mandatory ; 
    var RecordType;
    var RecordExpireDate;
    var ActivityEndDate;
    var SecurityClasification;
    var VitalClasification;

            lastNum=0;
            oList=null;
            collListItem=null;
            lstNames=[];
            textBox = document.getElementById('ddlURL').value;
            if(textBox!='')
            {           
            clientContext = new SP.ClientContext(textBox);
            oWebsite = clientContext.get_web(); 
            collList = oWebsite.get_lists();
    clientContext.load(collList,"Include(Title,RootFolder.ServerRelativeUrl,DefaultViewUrl,Id)");
   clientContext.executeQueryAsync(Function.createDelegate(this, this.onListQuerySucceeded), Function.createDelegate(this, this.onListQueryFailed));
    }
    else{alert("Please select sector");
    removeElement("tblListDatta", "imgLoading");}
    }

function onListQuerySucceeded() {

        var listInfo = '';      
        var listEnumerator = collList.getEnumerator();
        var itemsCount = collList.get_count();

        while (listEnumerator.moveNext()) {
        ListTitle=listEnumerator.get_current().get_title()!= null ? listEnumerator.get_current().get_title() : " "; 
        var ListGUID=listEnumerator.get_current().get_id()!= null ? listEnumerator.get_current().get_id() : " ";  

        ListUrl=listEnumerator.get_current().get_rootFolder().get_serverRelativeUrl()!= null ? listEnumerator.get_current().get_rootFolder().get_serverRelativeUrl() : " ";
        var parts = ListUrl.split("/");             

        if(ListTitle!="Calendar" && ListTitle!="Documents" && ListTitle!="Composed Looks" && ListTitle!="Master Page Gallery" && ListTitle!="Site Assets" &&  ListTitle!="Site Pages" &  ListTitle!="Tasks" &&  ListTitle!="MicroFeed" && ListUrl!="/sites/UPRI/uc/Access Requests" )
        {    
        lstNames.push({LGUID:ListGUID,LURL:ListUrl,LTitle:ListTitle})}
        }        
        getListItems(lstNames,textBox,"","");

}

function onListQueryFailed(sender, args) {
    alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}



  function getListItems(lstNames, siteurl, success, failure) {   
    var MCategory='';
    var lstTitle='';
    var lstUrl='';  
     var e = document.getElementById("ddlURL");       
     var SectorName= e.options[e.selectedIndex].text;   
    document.getElementById('listCount').innerText=SectorName +" Sector has "+lstNames.length+" Lists";
     for(var x=0; x<lstNames.length;x++)
        {
            lstUrl='http://epecm-s.petronas.com.my'+lstNames[x].LURL;
            lstTitle=lstNames[x].LTitle;
             var queryData ='';         
            //getFilteredItems(siteurl, lstNames[x].LGUID, lstTitle, lstUrl);           
            GetListitemsCount(siteurl,lstNames[x].LGUID, lstTitle,lstNames[x].LURL);            
       }
    }

  function GetListitemsCount(siteurl, listGUID, lstTitle,listURL)
  {  
  $.ajax({
        url: siteurl + "/_api/web/lists(guid'" + listGUID + "')/items?$top=10000",
        method: "GET",
        headers: { "Accept": "application/json; odata=verbose" },
        success: function (data) {            
          var itemsCount = data.d.results.length;       

           getFilteredItems(siteurl, listGUID, lstTitle,itemsCount,listURL);
        },

    });

  }
 function getFilteredItems(siteurl, listGUID, lstTitle,itemsCount,listURL)
 {
    $.ajax({
        url: siteurl + "/_api/web/lists(guid'" + listGUID + "')?$select=created",
        method: "GET",
        headers: { "Accept": "application/json; odata=verbose" },
        success: function (data) {

            var parts = data.d.results;
             var re=data.d.Created;
             note='';   
            mergePartsWithInventoryLocations(re, lstTitle,itemsCount,listURL);
        },

    });
}


 function mergePartsWithInventoryLocations(re,lstTitle,itemsCount,listURL) {
              var lstCreatedDate= getSPConvertDate(re);


     var SectorName= "https://epecm.petronas.com.my";

                note+= '<tr class="ms-rteTableEvenRow-default">' +
                '<td style="width:20%; max-height:30px;><div style="overflow:auto"> '+lstTitle+'</div></td>'+                   
                '<td style="width:10%">'+lstCreatedDate+'</td>'+
                '<td style="width:10%">'+itemsCount+'</td>'+

            '<td style="width:10%"><div style="overflow:auto"> <a  href="'+SectorName+listURL+'" title="'+SectorName+listURL+'"  target="_blank">'+SectorName+listURL+'</a></div></td></tr>'



                $("#tblListDatta").append(note);
                removeElement("tblListDatta", "imgLoading");

  }

Answer 1

Assuming you want more than just an alert() you can create a what is often called a modal page to act as a pop up.

First step is to create a hidden html section on your page that will act as the pop up. Next is to apply CSS styles to that section. Last is to create the Javascript that will display and/or hide it.

HTML

    <!-- Modal content -->
    <div class="modal-content">
        <span class="close">&times;</span><!--&times; is a fancy X symbol-->
        <p id="messageContent">Custom Message...</p>
    </div>

</div>

CSS

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

Javascript

function displayProcessingMessage(message) {
    if (message) {
        let htmlMessage = document.getElementById("proccessingMessage");
        htmlMessage.textContent = message;
    }
    // Get the modal
    let modal = document.getElementById('myModal');
    // Get the <span> element that closes the modal
    let span = document.getElementsByClassName("close")[0];
    // When the user clicks on <span> (x), close the modal
    span.onclick = function () {
        modal.style.display = "none";
    };
    // When the user clicks anywhere outside of the modal, close it
    window.onclick = function (event) {
        if (event.target == modal) {
            modal.style.display = "none";
        }
    };
    //open the modal
    modal.style.display = "block";
}
/**
* Append to the message
* @param message 
*/
function updateProcessingMessage(message) {
    let htmlMessage = document.getElementById("proccessingMessage");
    htmlMessage.innerHTML = htmlMessage.textContent + "<br />" + message;
}

Originally taken (and modified slightly) from w3schools https://www.w3schools.com/howto/howto_css_modals.asp

Answer 2

You can use Sweet Alert to achieve it

Get Sweet Alert here !

swal({
  title: "Are you sure?",
  text: "Your will not be able to recover this imaginary file!",
  type: "warning",
  showCancelButton: true,
  confirmButtonClass: "btn-danger",
  confirmButtonText: "Yes, delete it!",
  closeOnConfirm: false
},
 function(){
    swal("Deleted!", "Your imaginary file has been deleted.", "success");
 });

Screenshot of sweet alert: