I have a report view and I need to popup a sweetalert box on top of it. Here is the code for the sweet alert:

<script type="text/javascript">
    Swal.fire({
        title: 'Complete',
        text: 'We have built your reports',
        imageUrl: 'https://unsplash.it/400/200',
        imageWidth: 400,
        imageHeight: 200,
        imageAlt: 'Custom image',
    })
</script>

Where can I place this so it will appear "on top" of the report.view? 

This does not work.

This is what I get:

index:252 Uncaught ReferenceError: Swal is not defined
    at index:252:5
javascript_funcs.js:1 Uncaught ReferenceError: $ is not defined
    at javascript_funcs.js:1:1
index.ts:3 React ga index script inited
DevTools failed to load source map: Could not load content for https://cdn.loom.com/assets/js/37-837d0a228649c03d4415c1c8296ae90e.js.map: HTTP error: status code 403, net::ERR_HTTP_RESPONSE_CODE_FAILURE
DevTools failed to load source map: Could not load content for https://cdn.loom.com/assets/js/40-997a18fd9aa0ee9963b77571e9da1885.js.map: HTTP error: status code 403, net::ERR_HTTP_RESPONSE_CODE_FAILURE
DevTools failed to load source map: Could not load content for https://cdn.loom.com/assets/js/lens-9abe9cef027326cf0aa4eb6be3f45605.js.map: HTTP error: status code 403, net::ERR_HTTP_RESPONSE_CODE_FAILURE
DevTools failed to load source map: Could not load content for https://cdn.loom.com/assets/js/39-12dbd838a3506fb3805f6adb5bbb1006.js.map: HTTP error: status code 403, net::ERR_HTTP_RESPONSE_CODE_FAILURE
DevTools failed to load source map: Could not load content for https://cdn.loom.com/assets/js/embed-video-fresh-811c48288e83e9c9009c7e25f3f8bddc.js.map: HTTP error: status code 403, net::ERR_HTTP_RESPONSE_CODE_FAILURE
DevTools failed to load source map: Could not load content for https://cdn.loom.com/assets/js/0runtime-535a36233b11cac28c63781b5bf7cba7.js.map: HTTP error: status code 403, net::ERR_HTTP_RESPONSE_CODE_FAILURE
DevTools failed to load source map: Could not load content for https://cdn.loom.com/assets/js/player-9cf1d7781593866a25c304a614c265b2.js.map: HTTP error: status code 403, net::ERR_HTTP_RESPONSE_CODE_FAILURE
DevTools failed to load source map: Could not load content for https://staging.dashboard.research.com/assets/koolreport_assets/1563253455/bootstrap.bundle.min.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

Any ideas? I put it right before the </body> </html>

useful information

This is what was missing:

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>

OK. I got the popup working. But the timing is a little screwed up. I am using a promise to do the file transfer from s3, since there are a number of files that need to be copied for each user. I set up the transfer and display the dashboard, immediately. After about 5 or 6 seconds I get a message from the promise that the transfer either worked or it didn't. If it worked, there is nothing I need to do. But if it failed, I'd like to popup that sweetalert (over the dashboard), which asks a user if they want to retry.

With the method we were previously doing, the dashboard and the sweetalert are in the same file. I only want to show the sweetalert if the transfer fails.

Is there anyway to popup the sweetalert "over" the dashboard if needed.The decision to display sweetalert or not is made about 5 to 8 seconds after the dashboard is displayed.

Since I already have the view (called MyDashboard.view.php) without the sweetalrt on it, couldn't I just swap out that view file with one that has the sweetalrt on it (let's call it MyDashboard_w_sweet.view.php)? I surely don't want to rebuild the MyDashboard.php itself, again (way too slow). Here is what displays the current dasboard (wo the sweetalert)

        $report = new MyDashboard;
        $report->run()->render();

Is there a way to display MyDashboard_w_sweetalert a few seconds later, instead?I guess I don't need the render?