search

picturepan2 / spectre

Spectre.css - A Lightweight, Responsive and Modern CSS Framework
https://picturepan2.github.io/spectre/
MIT License
11.31k stars 804 forks source link

Modal #658

Closed alexolliveira closed 3 years ago

alexolliveira commented 3 years ago

Is there a way to implement a modal without putting a '#' in the url? When I click the button to open a modal, a '#' is added to the url to open it, but when I close it and I click on the browser's Back button, the modal opens automatically

Vectrex commented 3 years ago

This has nothing to do with CSS and therefore spectre. An anchor without at least a hash in its href attribute won't react to mouse events. An additional onclick="event.preventDefault()" should do the trick.

alexolliveira commented 3 years ago

This has nothing to do with CSS and therefore spectre. An anchor without at least a hash in its href attribute won't react to mouse events. An additional onclick="event.preventDefault()" should do the trick.

test: 1 - Access here https://8lab.000webhostapp.com/ 2 - Click Open modal 3 - Click the X or the Close button. 4 - Click on the browser's Back button 5 - And Voilá !!! The modal opens alone, without me clicking Open Modal

How can resolve this?

Vectrex commented 3 years ago

Do what I suggested?

nodgear commented 3 years ago

This has nothing to do with CSS and therefore spectre. An anchor without at least a hash in its href attribute won't react to mouse events. An additional onclick="event.preventDefault()" should do the trick.

test: 1 - Access here https://8lab.000webhostapp.com/ 2 - Click Open modal 3 - Click the X or the Close button. 4 - Click on the browser's Back button 5 - And Voilá !!! The modal opens alone, without me clicking Open Modal

How can resolve this?

Still not a CSS problem, you're creating the modal by appending the #modal-id to the URL, which to the browser means a redirection of some sort, you should be doing that using JS by displaying/hiding it directly on the DOM element. Otherwise, test what @Vectrex alredy told you to do.

alexolliveira commented 3 years ago

Thanks to all @Vectrex @nodgear, but I solved this... adding and removing the "active" "class" of the element with JS and also added javascript: void (0) Iin the links. https://8lab.000webhostapp.com/

nodgear commented 3 years ago

@alexolliveira happy for you, void(0) has the same result as event.preventDefault() because both of them are running an empty function without returns You can close the issue yourself afaik