Anyone know what the modal box script is that Yola uses for the modal boxes in the site builder?

  • 1
  • Question
  • Updated 9 years ago
  • Answered
Hi everyone. Does anyone know the lightbox script that is used for the widget modal boxes? Here is a screen shot of one of the modal boxes I am talking about:



I like how they resize. I am sure the designers know. Did you guys create it your self or use a script from some where?

Thanks in advance,
Nathan
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
  • happy

Posted 9 years ago

  • 1
Photo of Kevin

Kevin

  • 475 Posts
  • 29 Reply Likes
I know how they resize.
The boxes widths and heights are based on percentages, not pixels.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Thanks Kevin, but is that how they are animated? They are animating the resizing. That is cool. I know they use some type of JavaScript library (Jquery or MooTools?)

Nathan
Photo of Kevin

Kevin

  • 475 Posts
  • 29 Reply Likes
Likely Jquery. Mootools isn't suited to animation that much, while jquery is full with .animate, .fadein, e.t.c, as well as the jquery ui(user interface) library
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Thanks Kevin!
Photo of the_pete

the_pete

  • 65 Posts
  • 16 Reply Likes
Official Response
Hey Nathan

We created a custom dialog helper library to run all the dialogs in the Yola.com Site Builder. We used jQuery to do the fading and resizing animations (well spotted Kevin - jQuery is awesome for that). The dialog has a setDimensions function that can be triggered from user actions to dynamically resize. It's also got 2 modes - widget mode and application mode. Widget mode is the blue box in the image you attached and application mode is the rounded white box with the round close button in the top right corner we use for dialogs like the create page dialog.

Unfortunately the library is closely coupled with the application and isn't very suitable for use outside of the Site Builder, so I can't really offer it to you for your own uses. You're welcome to have a look at the code if you like, take a few tips if you like the way we've done something... the file is located here...

http://sitebuilder.yola.com/ide/Yola/...

The css is here...

http://sitebuilder.yola.com/ide/style...

Happy coding :)
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi the_pete, thanks for the links. You're right jQuery is very awesome for that stuff. I am making a website right now and it is will be very neat. Each part of the page fades in and then some other boxes pop up for the bottom. I did this all with jQuery. I will post a link once I get it done so everyone can see it. (It is a website with HTML codes, Scripts and Tutorials on it)

Thanks!
-Nathan
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Wow, it must have taken so long for all of the JS and CSS files to be done! Great job to all of the coders! :)
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
ANSWERED

You can mark this question as "Answered" now.
Photo of Kevin

Kevin

  • 475 Posts
  • 29 Reply Likes
I have made a topic to create these modal boxes and use them and it is Here
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
This is cool kevin!!! Great job! It looks exactly like Yola's widget ones, awesome job! :)

How did you get it to look almost exactly like their's?

Thanks,
Nathan