Hide Modal when Back button of browser is pressed

Hey @ycv005 you’ll need to provide additional details. How is the modal created? Can you show any code?

Just handling event which changes the value of @show_resume to True or False. By default, its value is false.

<div class="modal fade fullscreen-modal <%= @show_resume and "show"%>" id="resumeModal" tabindex="-1" role="dialog" aria-hidden="true" style="<%= @show_resume and "display: block;"%>">
.
.
.
</div>

I just want to hide modal when back button is press.
I hope, this would give you clear understanding.

Do you want to use Live view or javascript (jquery, vue, vanilla javascript)?

For plain javascript you can try How To Make a Modal Box With CSS and JavaScript

Back button event handler https://stackoverflow.com/questions/25806608/how-to-detect-browser-back-button-event-cross-browser

It would be better if there is any way to do it in LiveView.

You haven’t mentioned LiveView before, so far we assumed regular statically rendered templates…

As far as I remember push state support has been added recently and you should be able to use that to handle back/forward buttons from your liveview.

As @NobbZ said, you can use pushState support in LiveView which would really make the things easy.

With pushState in LiveView, when you show a modal you can update the URL (to something like /page/modal) without refreshing/changing the page. This new url is added to the browser history so when users click the back button they go back to the previous state (there are two examples on an article I wrote).

Ya, I also saw your videos. Thanks to all.