Challenge #2 of 2

In my web page, I decided to create my own modal. It's just a <div> element that I set to display: block whenever I want to show it. Not a big deal!

<div id="my_great_modal" style="display: none">
    <h1>Welcome to our Pizza Section!</h1>

    <p>You need to be a pizza lover before you proceed!</p>

    <button
        class="btn btn-primary"
        onclick="javascript:document.getElementById('my_great_modal').style.display='none';"
    >
        Proceed
    </button>
</div>

I then use JavaScript to discretely show this popup under certain circumstances (i.e. when I detect that a customer might not love pizza!).

But, when the user leaves the page when the modal is opened and then hits the browser's back button, Turbo is showing this modal for a brief period of time while the preview is showing. I don't want that!

How can I hide this modal every time Turbo shows my page preview?

document.addEventListener('turbo:before-visit', (event) => {
    document.getElementById('my_great_modal').display = 'none';
});

document.addEventListener('turbo:before-cache', (event) => {
    document.getElementById('my_great_modal').display = 'none';
});

document.addEventListener('turbo:before-fetch-request', (event) => {
    document.getElementById('my_great_modal').display = 'none';
});

document.addEventListener('turbo:load', (event) => {
    document.getElementById('my_great_modal').display = 'none';
});

Rewatch Video

TRACK

JavaScript Frameworks & Tools >

COURSE

Symfony UX: Turbo >

CHAPTER

The Problem of Snapshots & JavaScript Popups

Challenge #2 of 2