when button is clicked wheel spins and as animation is stopped, function is called in which alert box is shown and as i click ok button the wheel is reset to the original position. Instead of alert box i need to show popup box with ok button and as i clicked button wheel is reset to the original position.

        <section id="background-image">
            <div id="responsive" align="center">
                <div>
                    <h5 style="color: transparent;">Stop At:</h5>
                    <input id="wow" type="text">
                </div>
    
                <div >
                    <div >
                        <img src="pin.png" />
                    </div>
                    <table cellpadding="0" cellspacing="0" border="0">
                        <tr>
                            <td>
                                <div >
                                    <br />
                                    <br />
                                    <img id="spin_button" src="spin.png" alt="Spin" onClick="startSpin();" />
                                    <br /><br />
                                    <!--&nbsp;&nbsp;<a href="#" onClick="resetWheel(); return false;">Play Again</a><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(reset)-->
                                </div>
                            </td>
                            <td  width="438" height="582"  align="center" valign="center">
                                <canvas id="canvas" width="434" height="434">
                                    <p style="color: white;" align="center">Sorry, your browser doesn't support canvas. Please try another.</p>
                                </canvas>
                            </td>
                        </tr>
                    </table>
                </div>

            </div>
        </section>

        <script>
            // Create new wheel object specifying the parameters at creation time.
            let theWheel = new Winwheel({
                'numSegments'  : 8,     // Specify number of segments.
                'outerRadius'  : 212,   // Set outer radius so wheel fits inside the background.
                'textFontSize' : 28,    // Set font size as desired.
                'segments'     :        // Define segments including colour and text.
                [
                   {'fillStyle' : '#29d20a', 'text' : 'Prize 1'},
                   {'fillStyle' : '#0262e1', 'text' : 'Prize 2'},
                   {'fillStyle' : '#9a04aa', 'text' : 'Prize 3'},
                   {'fillStyle' : '#d50108', 'text' : 'Prize 4'},
                   {'fillStyle' : '#dfb201', 'text' : 'Prize 5'},
                   {'fillStyle' : '#29d20a', 'text' : 'Prize 6'},
                   {'fillStyle' : '#0262e1', 'text' : 'Prize 7'},
                   {'fillStyle' : '#9a04aa', 'text' : 'Prize 8'}
                ],
                'animation' :           // Specify the animation to use.
                {
                    'type'     : 'spinToStop',
                    'duration' : 5,     // Duration in seconds.
                    'spins'    : 8,     // Number of complete spins.
                    'callbackFinished' : alertPrize
                }
            });

            // Vars used by the code in this page to do power controls.
            let wheelPower    = 0;
            let wheelSpinning = false;

            function startSpin()
            {
                var value = document.getElementById('wow').value
                // Ensure that spinning can't be clicked again while already running.
                value = (parseInt(value)) - 1
                console.log(value)
                let stopAt = ((value*45) 1   Math.floor((Math.random() * (43))))
                console.log(stopAt)
                // Important thing is to set the stopAngle of the animation before stating the spin.
                theWheel.animation.stopAngle = stopAt;

                // May as well start the spin from here.
                theWheel.startAnimation();
            }

            function alertPrize(indicatedSegment)
            {
                alert("You have won "   indicatedSegment.text);

                
                theWheel.stopAnimation(false);  // Stop the animation, false as param so does not call callback function.
                theWheel.rotationAngle = 0;     // Re-set the wheel angle to 0 degrees.
                theWheel.draw();    
                wheelSpinning = false;    
            }
        </script>

CodePudding user response：

Try Sweetalart2 SweetAlert2

just copy paste the cdn link to the html header

<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>

and use below code where you want to trigger the alert

Swal.fire(
  'Good job!',
  'You clicked the button!',
  'success'
)