Streaming live at 10am (PST)

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


#1

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 !


#2

More informations on Slideshows:

I tried my best embedding the only nice and simple Responsive Slideshow in Webflow: http://responsiveslides.com/with-captions/themes.html

Without luck.

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


#3

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 wink

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 wink 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!


#4

@Zacchino please let me know if it works for you smile


#5

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.

  1. When you say "right after the Body", I can't edit the Body as Webflow just let me insert custom code into the Header.

  2. 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 ?

    1. Last but not least wink : 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.


#6

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


#7

Add it inside of a custom code area in Dashboard smile 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 smile


#8

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 wink)

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


#9

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 smile
http://ateliersainthonore.webflow.com
PS : Click on the "CONTACT" link on the bottom right of the website to see the magic happen.


#10

smile Glad you like it smiley


#11

@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


#12

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.


#13

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


#14

That should work smile 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 smile


#15

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


#16

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


#17

Sure, I'll do it this evening smile


#18

Thanks so much, no rush though!


#19

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!


#20

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! smile