New Great Yola style Modal Box!!!!

  • 1
  • Praise
  • Updated 8 years ago
Recently, I read this topic from Nathan, a champ, about the script of the modal box script for the modal boxes of Yola, (Click Here for that article). Well, after some work, I have managed to make a near duplicate of the boxes that Yola uses over here. the demo's and the instructions for using it is Here.

Enjoy!!!!!!

Photo of Kevin

Kevin

  • 475 Posts
  • 29 Reply Likes
  • happy

Posted 8 years ago

  • 1
Photo of Kevin

Kevin

  • 475 Posts
  • 29 Reply Likes
p.s For unknown reasons, it glitches with Firefox and Opera
IE, Chrome, and Safari is fine.
Photo of Kevin

Kevin

  • 475 Posts
  • 29 Reply Likes
opera doesn't work at all
Photo of Kevin

Kevin

  • 475 Posts
  • 29 Reply Likes
as for firefox, you can have only one modal box link, because for some reason the box , which is a child generated by javascript, won't go when the script gives the command to remove the child.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Thanks for taking the time to share this!
Photo of Kevin

Kevin

  • 475 Posts
  • 29 Reply Likes
your welcome!!!
Photo of Kevin

Kevin

  • 475 Posts
  • 29 Reply Likes
Great news!!!! Firefox now supported!!!!!
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Awesome!
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Kevin, I am sorry to post again, but can I host the files on my website so I can make the "Close" image smaller and put it into one of my CSS sprites so the images will all be combined? (I like using CSS sprites so the page loads faster because there isn't a bunch of images, there is only one image with a bunch of images inside it and you use CSS to change the position of the background-image of the div.) I am sure we can, just I wanted to ask. (This is how Yola does it in the site builder)

Sincerely,
Nathan
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi Kevin, this lightbox is awesome! Thank you for posting this! I like how it animated and stuff, good job!

That is cool! :)

Sincerely,
Nathan
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Also I was looking into your CSS and JS files for that new modal box and they are very short for that nice modal box, great job! :)
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
One more question Kevin, can you use Ajax to put content into the modal box? Like an Ajax request, instead of iframes. You can probably make another function or something and then add in:


<br>
document.getElementById('modalbox').load();
<br>


But you would need to add in a bunch of stuff but it would be great. I know it can only be web pages right now, but Ajax is like on the Facebook modal boxes, because they use Ajax to make it put content into them.

Also everyone, I made a box which does not pop up but it fades in when you load the page and then it says "Loading..." and then it finally loads and it is cool, even though it's not really a modal box but it is a notice box or something. Here is the page I have it on right now: http://nathansmusicstudio.cz.cc/index... It fades in when the page loads and then it loads the content. (With JavaScript timeouts and jQuery)

Thanks,
Nathan
Photo of Kevin

Kevin

  • 475 Posts
  • 29 Reply Likes
Sure, feel free to alter, distribute or do anything you want with the files and code.
As for ajax, I don't know, you'll have to try that yourself. I don't know ajax. Sorry.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
It's ok. Thanks Kevin! If I get Ajax to work with it I will make sure to post the extra function/code to add into the script! :)

Nathan
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes
That is super Kevin thanks for sharing... I will no doubt be using it this weekend on my site... ;) truly cool to see sharing going on in the Yola forums.

Happy site building
Ed

If you find my tips useful please share my website with your social network friends...

Honey Bear Playhomes Tips and Favs in one place... A Honey bear Playhomes Tip ;)
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes
Nice one Kevin... Under five minutes and the five mouseover playhouse images on my index page all use your modal box. Just add the (rel="modalbox") after the link URL in any mouseover code. I'll add it to my other pages when I rebuild them this weekend. Thanks Chief...
Photo of Kevin

Kevin

  • 475 Posts
  • 29 Reply Likes
Great! I love your site! Honey Bear Play Homes looks so nice. One suggestion though, if possible, remove some of the animations on your site. The site is lagging on all of my browsers and I have a high speed internet connection.
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes
Hey Kevin I am on an average speed wireless DSL and a 10 year old Dell notebook here in Redmond and have (I kid you not)

10 tabs with my website open in Firefox
5 tabs with my website open in Internet Explorer
5 tabs with my website open in Chrome
5 tabs with my website open in Safari
My Firefox open to the Yola sitebuilder, a tab opened to Get Satisfaction as well as a tab open to Fox's website where I am streaming The Simpsons right now and each tab of my site in all the browsers show no lag.

Because you said that I am going to pull my old 12 year old desktop out of mothballs tomorrow and if I have issues with a fresh history with my site never being on the screen then I will delete some features. The old dinosaur is usually my litmus test on page load.

Come to think of it the Sharethis button in the right corner is buggy with Internet Explorer and the site never stops loading and never shows the four buttons. I have a ticket in with Sharethis to find out why but that has been 3 days ago...

Thanks for the suggestion and I will look into it...
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes
Bummer the colorful sharethis buttons and one of the JS files for the modal box are lagging says Load Impact.com

I just changed from Sharethis to Addthis for the social networking buttons and had to delete the Modal box because for some reason it does not like my site. That is a shame as it is pretty cool. I will work on getting it back when I have some rest. Maybe have a mouse over instead of the flash menu. Gonna be more of a challenge to lock all those buttons in on the left of the screen than the swf file but I do need to get a quicker load.

Thanks again...
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
Hi Ed,

You should try adding the images in a 'DIV Tag' ( I used Dreamweaver ) to add the images, they will automatically locate to the top left of the screen.

Hope this helps, if you need anymore help or explaining, let me know!
Photo of Kevin

Kevin

  • 475 Posts
  • 29 Reply Likes
I might know why the modal box script is lagging.
The script has a bit of jquery which goes like this:
$(window).load(function(){
//code
});
That basically means the modal box will not work until all the images and content have loaded. So, I believe it's lagging because it was still waiting for the page to load.
Photo of Kevin

Kevin

  • 475 Posts
  • 29 Reply Likes
I put that in because on some websites where there is a lot of content, unless the script doesn't run until everything has loaded, it will not work because the jquery will try to detect an object that hasn't loaded yet, therefor making the script useless.
Photo of mesikuic

mesikuic

  • 1 Post
  • 0 Reply Likes
Thanks for this,

Appreciate you taking some time out to make this available. You can't believe how much digging you have to do nowadays just to find a simple piece of code that will perform a simple function.