Please use code tags
$(document).ready(function() {
$('.ButPlayDreamscapes').click(function() {
$('.ModalBG').fadeIn();
});
$('.ButCloseModal').click(function() {
$('.ModalBG').fadeOut();
});
});
Give us please troubleshooting link and link to active site.
You are correct it won’t work in preview mode because the custom code is added after publish, not while in the designer. You can easily publish to your subdomain and test it there:
Oh I’m sorry. I didn’t read the Preview mode carefuly… As @thesergie said, it won’t work in preview mode.
Many thanks guys! Will give it a try after publishing.
Hey Guys, thanks for the tips. I just couldn’t get how can I link the modal to the button. Is it on the code or I need to make on webflow? How can I achieve this?
Thanks
Let me explain the code. First, let’s see the code used:
$(document).ready(function() {
$('.ButPlayDreamscapes').click(function() {
$('.ModalBG').fadeIn();
});
$('.ButCloseModal').click(function() {
$('.ModalBG').fadeOut();
});
});
Now let’s explain it.
$(document).ready(function() {
$('.button-class-here').click(function() {
$('.popup-window-class-here').fadeIn();
});
$('.close-button-class-here').click(function() {
$('.popup-window-class-here').fadeOut();
});
});
The first line means: when the document is ready, do this function:.
In second line you put the name of a class of button which will open the popup.
Third line tells what will be shown. .popup-window-class-here in my code or .ModalBG in @thesergie’s code is a class of a popup you create.
In 5th line you put the name of a class of button from modal window which will close the popup.
6th line tells what will happen when the button in 5th line is clicked. This code will close the popup.
If you read the code carefuly you will understand it easily 
Thanks for the fast response @bartekkustra . I’m quite a newbie in code and webdesign but with webflow and your help things are getting cleared and more exciting everyday. Again, many thanks
Hi guys,
Thanks for posting this - it’s 95% what I need.
In my case I’d like the modal to open as soon as the page loads. What changes do I need to make to the jquery code for this to happen?
Thanks very much for your help.
Colman
This is a really great tutorial, much needed!
My one question though - Is it possible to make a close action when clicking anywhere outside the model, rather than the actual close link?
$(document).ready(function() {
$('.popup-window-class-here').fadeIn();
$('.close-button-class-here').click(function() {
$('.popup-window-class-here').fadeOut();
});
});
$('body').click(function() {
$('.popup-window-class-here').fadeOut();
}); That’s great. Really appreciate your help. Thanks!
Actually, one more question. How can I set it so that the modal doesn’t appear every time a user returns to the site. That is, it only appears on the first visit.
If that’s possible, I’d really appreciate your help.
You can add cookies functionality and check whether there is a cookie already or not. Simple but need some time to implement.
Great tutorial and tips everyone. Could someone point me in the right direction for how I can create a link to my page that directly launches with the modal open? I don’t want to always have it open on arrival but for specific links I want it to open (e.g. to display a “thank you for your order” message on top of my page).
A couple f more questions on this. One of which seems really dumb:
I have the modal box on my home screen, but the modal background is preventing me from editing anything else on the page, when I am in design mode. Can I temporarily hide it while I work on other stuff?
I’d like to close the box my clicking “Close” and/or clicking anywhere outside the box. But when I tried combining the jquery snippets you provided above (thanks again) the box closes when I click anywhere on the screen - including in the box!
Here’s the code I’m attempting to use. Any advice?
That is because you have
$('body').click(function() {
$('.modal-background').fadeOut();
});
That means that whenever you click anywhere on your page the window will fadeOut();. You can hide your modal by selecting it and setting display: none; to it. You can (and even should) publish your site with your modal window hidden. That way whenever you load your page it will fadeIn() the modal window smoothly
That’s excellent. Thanks!
Hey guys - I haven’t heard a response on this yet so wanted to ask again: I implemented my modal pretty much as Sergie described so by default it is hidden. I’d like to create a link that will take users to the page with the modal open, while having it closed by default for most visitors. Any ideas?
Hmmm I tried EndangeredMassa’s code here: http://stackoverflow.com/questions/688196/how-to-use-a-link-to-call-javascript but I’m still not having any luck. Any suggestions?
Hi @Colin_Roper, no problem! This is pretty straightforward.
FIrst, add this new updated code:
<script type="text/javascript">
$(document).ready(function () {
$('.modal-link').click(function () {
$('.modal-background').fadeIn();
return false;
});
$('.close-modal').click(function () {
$('.modal-background').fadeOut();
return false;
});
if (location.hash == '#show-modal') {
$('.modal-background').fadeIn();
}
});
</script>
Then, whenever you link to the page with the modal, you’ll need to use a custom url and append the hash to the end of the link. For example, if you’re linking to the home page, your link would look like this:
/#show-modal
And if you’re linking to a another page, use that page’s url, for example:
/contact#show-modal
Hope that helps!
-Dan