Add confetti animation to a jquery dialog box

Is it possible to add some confetti animation effect when the pop up is displayed?

//Add these JS and CSS
- Refer JS: https://github.com/CoderZ90/confetti/blob/main/confetti.js 
- Refer CSS: https://github.com/CoderZ90/confetti/blob/76ac0a6e72b8963b2cdd8e73a6960dca7d36fd48/style.css

Select allOpen in new window

<script src="confetti.js"></script>
<link rel="stylesheet" href="style.css">

Select allOpen in new window

<div id="WelcomeGiftpageModalMessage" style="background-color: #e8e8e8;">
    @Display(Model.WelcomeGiftPage)
</div>

Select allOpen in new window

<script>
// for starting the confetti 

const start = () => {
setTimeout(function() {confetti.start()}, 1000);};

//  for stopping the confetti 
const stop = () => {
setTimeout(function() {confetti.stop()}, 5000);};

start();
stop();

</script>

<style>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Product Sans';
}

html,
body {
    width: 100%;
    height: 100%;
    background: #f1f1f1;
    display: flex;
    align-items: center;
    justify-content: center;
}

p {
    font-size: 4rem;
    text-shadow: 0 0 10px;
}
</style>

<script>
var confetti = {
   maxCount: 150,      //set max confetti count
   speed: 2,         //set the particle animation speed
   frameInterval: 15,   //the confetti animation frame interval in milliseconds
   alpha: 1.0,         //the alpha opacity of the confetti (between 0 and 1, where 1 is opaque and 0 is invisible)
   gradient: false,   //whether to use gradients for the confetti particles
   start: null,      //call to start confetti animation (with optional timeout in milliseconds, and optional min and max random confetti count)
   stop: null,         //call to stop adding confetti
   toggle: null,      //call to start or stop the confetti animation depending on whether it's already running
   pause: null,      //call to freeze confetti animation
   resume: null,      //call to unfreeze confetti animation
   togglePause: null,   //call to toggle whether the confetti animation is paused
   remove: null,      //call to stop the confetti animation and remove all confetti immediately
   isPaused: null,      //call and returns true or false depending on whether the confetti animation is paused
   isRunning: null      //call and returns true or false depending on whether the animation is running
};

(function() {
   confetti.start = startConfetti;
   confetti.stop = stopConfetti;
   confetti.toggle = toggleConfetti;
   confetti.pause = pauseConfetti;
   confetti.resume = resumeConfetti;
   confetti.togglePause = toggleConfettiPause;
   confetti.isPaused = isConfettiPaused;
   confetti.remove = removeConfetti;
   confetti.isRunning = isConfettiRunning;
   var supportsAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame;
   var colors = ["rgba(30,144,255,", "rgba(107,142,35,", "rgba(255,215,0,", "rgba(255,192,203,", "rgba(106,90,205,", "rgba(173,216,230,", "rgba(238,130,238,", "rgba(152,251,152,", "rgba(70,130,180,", "rgba(244,164,96,", "rgba(210,105,30,", "rgba(220,20,60,"];
   var streamingConfetti = false;
   var animationTimer = null;
   var pause = false;
   var lastFrameTime = Date.now();
   var particles = [];
   var waveAngle = 0;
   var context = null;

   function resetParticle(particle, width, height) {
      particle.color = colors[(Math.random() * colors.length) | 0] + (confetti.alpha + ")");
      particle.color2 = colors[(Math.random() * colors.length) | 0] + (confetti.alpha + ")");
      particle.x = Math.random() * width;
      particle.y = Math.random() * height - height;
      particle.diameter = Math.random() * 10 + 5;
      particle.tilt = Math.random() * 10 - 10;
      particle.tiltAngleIncrement = Math.random() * 0.07 + 0.05;
      particle.tiltAngle = Math.random() * Math.PI;
      return particle;
   }

   function toggleConfettiPause() {
      if (pause)
         resumeConfetti();
      else
         pauseConfetti();
   }

   function isConfettiPaused() {
      return pause;
   }

   function pauseConfetti() {
      pause = true;
   }

   function resumeConfetti() {
      pause = false;
      runAnimation();
   }

   function runAnimation() {
      if (pause)
         return;
      else if (particles.length === 0) {
         context.clearRect(0, 0, window.innerWidth, window.innerHeight);
         animationTimer = null;
      } else {
         var now = Date.now();
         var delta = now - lastFrameTime;
         if (!supportsAnimationFrame || delta > confetti.frameInterval) {
            context.clearRect(0, 0, window.innerWidth, window.innerHeight);
            updateParticles();
            drawParticles(context);
            lastFrameTime = now - (delta % confetti.frameInterval);
         }
         animationTimer = requestAnimationFrame(runAnimation);
      }
   }

   function startConfetti(timeout, min, max) {
      var width = window.innerWidth;
      var height = window.innerHeight;
      window.requestAnimationFrame = (function() {
         return window.requestAnimationFrame ||
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame ||
            window.oRequestAnimationFrame ||
            window.msRequestAnimationFrame ||
            function (callback) {
               return window.setTimeout(callback, confetti.frameInterval);
            };
      })();
      var canvas = document.getElementById("confetti-canvas");
      if (canvas === null) {
         canvas = document.createElement("canvas");
         canvas.setAttribute("id", "confetti-canvas");
         canvas.setAttribute("style", "display:block;z-index:999999;pointer-events:none;position:fixed;top:0");
         document.body.prepend(canvas);
         canvas.width = width;
         canvas.height = height;
         window.addEventListener("resize", function() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
         }, true);
         context = canvas.getContext("2d");
      } else if (context === null)
         context = canvas.getContext("2d");
      var count = confetti.maxCount;
      if (min) {
         if (max) {
            if (min == max)
               count = particles.length + max;
            else {
               if (min > max) {
                  var temp = min;
                  min = max;
                  max = temp;
               }
               count = particles.length + ((Math.random() * (max - min) + min) | 0);
            }
         } else
            count = particles.length + min;
      } else if (max)
         count = particles.length + max;
      while (particles.length < count)
         particles.push(resetParticle({}, width, height));
      streamingConfetti = true;
      pause = false;
      runAnimation();
      if (timeout) {
         window.setTimeout(stopConfetti, timeout);
      }
   }

   function stopConfetti() {
      streamingConfetti = false;
   }

   function removeConfetti() {
      stop();
      pause = false;
      particles = [];
   }

   function toggleConfetti() {
      if (streamingConfetti)
         stopConfetti();
      else
         startConfetti();
   }
   
   function isConfettiRunning() {
      return streamingConfetti;
   }

   function drawParticles(context) {
      var particle;
      var x, y, x2, y2;
      for (var i = 0; i < particles.length; i++) {
         particle = particles[i];
         context.beginPath();
         context.lineWidth = particle.diameter;
         x2 = particle.x + particle.tilt;
         x = x2 + particle.diameter / 2;
         y2 = particle.y + particle.tilt + particle.diameter / 2;
         if (confetti.gradient) {
            var gradient = context.createLinearGradient(x, particle.y, x2, y2);
            gradient.addColorStop("0", particle.color);
            gradient.addColorStop("1.0", particle.color2);
            context.strokeStyle = gradient;
         } else
            context.strokeStyle = particle.color;
         context.moveTo(x, particle.y);
         context.lineTo(x2, y2);
         context.stroke();
      }
   }

   function updateParticles() {
      var width = window.innerWidth;
      var height = window.innerHeight;
      var particle;
      waveAngle += 0.01;
      for (var i = 0; i < particles.length; i++) {
         particle = particles[i];
         if (!streamingConfetti && particle.y < -15)
            particle.y = height + 100;
         else {
            particle.tiltAngle += particle.tiltAngleIncrement;
            particle.x += Math.sin(waveAngle) - 0.5;
            particle.y += (Math.cos(waveAngle) + particle.diameter + confetti.speed) * 0.5;
            particle.tilt = Math.sin(particle.tiltAngle) * 15;
         }
         if (particle.x > width + 20 || particle.x < -20 || particle.y > height) {
            if (streamingConfetti && particles.length <= confetti.maxCount)
               resetParticle(particle, width, height);
            else {
               particles.splice(i, 1);
               i--;
            }
         }
      }
   }
})();
</script>


<script>
// for starting the confetti 

const start = () => {
setTimeout(function() {confetti.start()}, 1000);};

//  for stopping the confetti 
const stop = () => {
setTimeout(function() {confetti.stop()}, 5000);};

start();
stop();

</script>

Select allOpen in new window

<script type="text/javascript">

 jQuery(document).ready(function () {
   var ShowPopUp = jQuery('#ShowPopUp').val();
   if (ShowPopUp == 'TRUE') {

   //call confetti effect
   ConfettiPopup();

   jQuery("#WelcomeGiftpageModalMessage").dialog({
                    autoOpen: true,
                    resizable: false,
                    modal: true,
                    width: 600,
                    position: 'center',
       });
    }
           
});

function ConfettiPopup()
{
  // for starting the confetti 

  const start = () => {
  setTimeout(function() {confetti.start()}, 1000);};

  //  for stopping the confetti 
  const stop = () => {
  setTimeout(function() {confetti.stop()}, 5000);};

  start();
  stop();
}

</script>

Select allOpen in new window

<div id="WelcomeGiftpageModalMessage" style="background-color: #e8e8e8;">
@Display(Model.WelcomeGiftPage)</div>

Select allOpen in new window

@using Draftfcb.PurchasEdge.Member.ViewModels
@model MemberWelcomeGiftPageViewModel
@{
    Script.Require("jQueryUI_Dialog").AtFoot();
    Style.Require("jQueryUI_Orchard").AtFoot();
    Script.Require("Confetti").AtFoot();
    
}

<div id="WelcomeGiftpageModalMessage" style="background-color: #e8e8e8;">
    @Display(Model.WelcomeGiftPage)
</div>

Select allOpen in new window

var ShowPopUp = jQuery('#ShowPopUp').val();

Select allOpen in new window

   if (ShowPopUp == 'TRUE') {

Select allOpen in new window

jQuery("#WelcomeGiftpageModalMessage").dialog({
        autoOpen: false,

Select allOpen in new window

 var ShowPopUp = jQuery('#ShowPopUp').val(); 

Select allOpen in new window

if (Model.WelcomeGiftPage != null)  
        {
            
            <div id="WelcomeGiftpageModalMessage" style="background-color: #e8e8e8;">
                @Display(Model.WelcomeGiftPage)
            </div>

            @Html.Hidden("ShowPopUp", "TRUE")

Select allOpen in new window

@using Draftfcb.PurchasEdge.Member.ViewModels
@model MemberWelcomeGiftPageViewModel
@{
    Script.Require("jQueryUI_Dialog").AtFoot();
    Style.Require("jQueryUI_Orchard").AtFoot();
    Script.Require("Confetti").AtFoot();//call confetti function at footer?
    
}

<div id="WelcomeGiftpageModalMessage" style="background-color: #e8e8e8;">
    @Display(Model.WelcomeGiftPage)
</div>

Select allOpen in new window