Symfony UX: Turbo
The Problem of Snapshots & JavaScript Popups
  Start your All-Access Pass to unlock this challenge
Buy Access Login

Challenge 2 / 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?

Skip challenges and go to theNext Chapter

Turn Challenges Off?

All further challenges will be skipped automatically.
You can re-enable challenges at any time on this page or from your account page.