How to open modal on page load?

[drublic]

How to open modal on page load?

[4nduril]

You can load it by opening a url with fragment identifier. I.e. somesite.com/#modal1 for example.

[ScotsScripts]

That makes sense. I was thinking more along the lines of arbitrarily opening it up on a page load regardless of which link they click on. For example, have the modal open on the 4th page load by a site visitor. Is there a way to set that #modal1 fragment identifie using javascript when the page loads? Thanks for the help, I appreciate it.

[4nduril]

You could do something like location.hash = "modal1";. Wrap it in any (callback) function you want to.

[ScotsScripts]

I was able to figure out how to make it work with your suggestion. This is going to help with something I'm working on, really appreciate the tip, thanks!

[ScotsScripts]

I just ran into an issue with this. In firefox when I change the hash, the modal doesn't automatically pop up. The other browsers work as expected. Perhaps I'm not doing it right. In the head I have this (sm is the id of the modal):

<script type="text/javascript">window.location.hash = "sm";</script> </script> <script src="js/modal.js"></script>

It's a very simple setup but even though #sm is being added to the URL, the modal doesn't automatically pop up. It will come up if I reload the URL with the #sm on it. Any ideas?

[ScotsScripts]

Head example didn't come through, I'll try indenting it.

<script type="text/javascript">window.location.hash = "sm";</script>
<link rel="stylesheet" href="css/modal.css"></script>
<script src="js/modal.js"></script>

[anselmh]

Thanks for the additional details. As I am able to confirm this, I now reopen the issue. A bugfix is coming soon! For the time being you can fix this by extending the :target selectors by:

&:target,
&.is-active {
    …
}

As the .is-active class is set by the js this will then trigger your modal on load.

[ScotsScripts]

That worked! I went into the css file and found every instance of :target and basic went from this:

.semantic-content:target {
display: block\9;
 }

to this:

.semantic-content:target, .semantic-content.is-active {
display: block\9;
 }

Thanks a lot for the help, it's very much appreciated.

[drublic]

The fix landed. Thanks :)