Link to a Pop-Up (Modal) Window: A simple way do to it?

Zacchino · November 26, 2013, 9:28pm

Hello Everyone,

I did my best looking over the forums and I just thought I could drop a quick message on the board.

As the website I’m working on is live (online), I can’t play around too much, and I can’t wait 2 weeks for Webflow to update their widget and add basic tools like a Pop-Up (Modal) Window… And a Responsive Slider / Carousel / Slideshow… But that’s another issue.

So does anyone know a reliable way to make this happen :

I have a link on the footer of the website called “contact”, and I want it, when clicked, to pop-up a lightbox / shadowbox / modal window (of let’s say 730px per 430px), with inside an H1/H2 Title, and a Paragraph with external links… And of course at the top right a simple, elegant X close sign in order to make this window disappear.

Any help even hints very much appreciated !

Zacchino · November 26, 2013, 10:12pm

More informations on Slideshows:

I tried my best embedding the only nice and simple Responsive Slideshow in Webflow: ResponsiveSlides.js · With captions

Without luck.

Here’s the project link : http://ateliersainthonore.webflow.com

bartekkustra · November 27, 2013, 7:16am

HTML

<!-- right after body tag -->
<div id="popup">
    <h1>This is an awesome box</h1>
    <p>This is a paragraph with awesome text</p>
    <div class="clicktoclose">click me to close!</div>
</div>

<!-- anywhere you want -->
<a href="#" class="clickme">Click for awesome popup</a>

CSS

Style that damn box however you want (you can use webflow to create a box with stuff in it and then export only that box :D

Custom Code in Dashboard

and yes… I know that you can use webflow as jQuery library somehow, but I didn’t have time to figure it out, so I’ll just implement jQuery here and let the magic happen. This is more as a template rather than precise answer

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
    $(document).ready(function() {
        $('.clickme').click(function(e) {
            e.preventDefault();
            
            boxh = $('#popup').height();
            windowh = $(window).height();
            
            $('#popup').css('margin-top', windowh/2 - boxh/2);

            $('#popup').fadeIn();
        });
        $('.clicktoclose').click(function() {
            $('#popup').fadeOut;
        });
    });
</script>

Know how:

RIght after the <body> tag you create your popup. As I said, you can use webflow to create that box, style it etc. In my code you can find things like #popup which is an id="popup" given in html for the popup box div. Next thing is a .clickme which is a class="clickme" given to the link element which will open the popup. Another one is a .clicktoclose given to the div block which should close the popup if clicked.

e.preventDefault() used in code is to prevent browser from doing what a regular link does - going to specified place

boxh = $('#popup').height(); windowh = $(window).height(); is used here: $('#popup').css('margin-top', windowh/2 - boxh/2); and this is to center the whole box. Simple math! Take the window height, take the popup height. If you substract half of the popup height from half of the window height, you’ll get the height from top of the screen to top of the popup And this sets the margin-top of it.

Important notice:

I’ve written this code ‘from head’ and I cannot guarantee it will work under Webflow. It should if you create site from scratch. If there is anything I could help you with, please do not hesitate to ask!

bartekkustra · November 28, 2013, 11:10am

@Zacchino please let me know if it works for you

Zacchino · November 28, 2013, 7:24pm

Hello Bartekkustra !

Thank you so much for your reply. Okay I’m going ahead and I’ll be integrating this to the current webflow project.

When you say “right after the Body”, I can’t edit the Body as Webflow just let me insert custom code into the Header.
As you may guess, I don’t want to extract / export the code and publish it somewhere else, I want all this to be done within webflow, hence this second question : where do I put the CSS styling code of the modal window ?
Last but not least : if you have any similar tip on how to make this Slider of the homepage actually work, It will probably save me so much time ! I tried my best without luck.

danro · November 28, 2013, 8:13pm

Hi guys, we’ve just added another custom code area before the closing </body> tag. This is the best place to add custom scripts, and better yet, you can re-use the existing jQuery library. Give it a try!

P.S. - we’ve got our own Slider widget on the way later next week. Stay tuned!
-Dan

bartekkustra · November 29, 2013, 8:19am

[quote=“Zacchino, post:5, topic:984, full:true”]
When you say “right after the Body”, I can’t edit the Body as Webflow just let me insert custom code into the Header.

As you may guess, I don’t want to extract / export the code and publish it somewhere else, I want all this to be done within webflow, hence this second question : where do I put the CSS styling code of the modal window ?[/quote]
Add it inside of a custom code area in Dashboard To add CSS place at the very beginning of the custom-code this code:

<style>
 ... your custom css here ...
</style>

What do you mean by Slider? Full image slider on site? Well… try to contact me over Skype and I’ll do my best to explain it to you

Zacchino · November 29, 2013, 8:57am

Bartekkustra,

Again let me thank you because it’s a pleasure to read and follow your instructions.

Alright, so I did everything like a good student, I also created a “orphan” page on Webflow to create my Pop-Up windows for all the styling (so that Webflow keeps all the CSS online), and I added the codes to the Header and Body, but somehow, when I click on the “Contact” link of the footer of this site (where I placed the refered class to call the script), nothing happens.

http://ateliersainthonore.webflow.com/

Now I just feel like crying over the couch saying “I did my best… I did my best” (Dane Cook ;))

I’d love to arrange a Skype session for the Slider issue ! My Skype ID : zacchino

Zacchino · November 29, 2013, 11:51am

Alright everyone,

Thanks to the great JS skills, and patience of Bartekkustra, we were able to make an elegant Pop-up window.

It’s live, and you can check out the source code to know how it’s been done
http://ateliersainthonore.webflow.com
PS : Click on the “CONTACT” link on the bottom right of the website to see the magic happen.

bartekkustra · November 29, 2013, 7:26pm

Glad you like it

matthew1818 · December 20, 2013, 8:46pm

@Zacchino I’m struggling with a modal window. Can you post the code snippets here? I can’t quiet tell what’s going on. I would really appreciate it.

Thanks, Matthew

Zacchino · December 20, 2013, 10:15pm

Hi Matthew,

Please send @bartekkustra a quick private message and when he’ll have the time, he’ll copy/paste the code used for this Popup Modal Window.

matthew1818 · December 22, 2013, 11:50pm

Thanks Zacchino! @bartekkustra I was about to send you a private message, but in my profile messages area I don’t have/see any ability to create a new private message. I hope you can help me. My email is matthew1818@gmail.com if that would be better.

Thanks, Matthew

bartekkustra · December 23, 2013, 9:31am

That should work Set up popup and clickme in config section. Set the popup window position as fixed, style it however you want it.

$(document).ready(function() {
	// config
		popup = $('.popup-container');
		clickme = $('.button-to-click');
	
	// pop-up
		vh = $(window).height();
		vw = $(window).width();
		bw = popup.width();
		bh = popup.height();
		clickme.click(function(e) {
            e.preventDefault();
            popup.slideUp();
            popup.css('left', vw/2 - bw/2);
            popup.css('top', vh/2 - bh/2);
            popup.slideDown();
        });
});

That will make your modal window slide from top of the screen. If you want it to appear in the middle of the page uncomment all lines in this code and change slideUp(); to fadeOut(); and slideDown(); to fadeIn();

You can send private message by going to someone’s profile and clicking Private Message button on left

matthew1818 · December 24, 2013, 6:21am

Thanks @bartekkustra! You are awesome! I had to play around a little, but I figured it out. This is the solution that worked for me.

**Modal/Pop Up Window Solution (read this or it won’t work)

Your html pop up div must be set to display none. This ensures you only see the div when you click the open link. Also set the div to a fixed position.

HTML (I added this HTML using the webflow interface aka drag and drop the elements then give the elements their specific class name)

<a class="button-to-click" href="#">This link opens the popup window.</a>

<div class="popup-container">
<p>This is a paragraph in the pop up window. Remember this div needs to be set to display none aka invisible and fixed position.</p>

<a class="popup-close" href="#">Close me button.</a>

JQuery aka custom code in dashboard (this fades the popup in and fades out on close - notice how the html classes match the JS code)

<script>
$(document).ready(function() {
    // config
        popup = $('.popup-container');
        clickme = $('.button-to-click');

    // pop-up
        vh = $(window).height();
        vw = $(window).width();
        bw = popup.width();
        bh = popup.height();
        clickme.click(function(e) {
            e.preventDefault();
            popup.fadeOut();
            popup.css('left', vw/2 - bw/2);
            popup.css('top', vh/2 - bh/2);
            popup.fadeIn();
        });
   //close button
      $('.popup-close').click(function() {
            $('.popup-container').fadeOut();
        });
});
</script>

CSS (this is added using the webflow interface. I’m just showing you what the CSS looks like in code form.)

.popup-container {
  position: fixed;
  display: none;
}

-Matthew

DFink · February 24, 2014, 2:34am

I am really interested in using this. Any chance anyone might be able to do a quick video tutorial on where to put the code and how it works in action. I am not a coder by any means so its scary looking at the code and thinking about where everything goes and if I need to do it multiple times for different styled modals.

Thanks!

Dave

bartekkustra · February 24, 2014, 10:21am

Sure, I’ll do it this evening

DFink · February 24, 2014, 10:23am

Thanks so much, no rush though!

DanPollock · September 4, 2014, 4:23am

Hey folks, did anyone ever get around to making a video tutorial for this? I’m a bit lost as to whether this is all done in Webflow or whether this is code to add in manually after export.

Many thanks!

dradice · January 13, 2015, 7:41am

Hi MAtthew – this is exactly what I’m looking for in a forum post I put up earlier. My problem is I’m a complete neophyte when it comes to html and so on. I added the custom code to the site, before the but I don’t know what to do with the html code from earlier in your post.

If you’re able to message me, I’d really appreciate the help!