How To Create A Pop-Up Window In Moonfruit Site Using JavaScript Code

Over the next few months’ we’ll be adding some top tips and tricks on designing your website using Moonfruit’s SiteMakers 5. Moonfruit is probably the most simple yet most powerful online drag-and-drop based web publishing tool in the world! In this post we’re going to create a pop-up box using a simple JavaScript code.

Step One

First step is to create a new page in Moonfruit and in the top left hand corner of this page add a text box 615px wide and 110px high. Enter what ever information or text you want in this box as this is going to be the pop-up page / window itself. See my example below.

Moonfruit Pop-Up

Moonfruit2

Step Two

In the Moonfruit site edit dashboard, add a new HTML snippet to any other page where you want to add a pop up link. In the HTML snippet box add the following code:

<a href="#"onclick="('http://www.yourweblog.com/yourfile.html','popup','width=500,height=500,scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false" href="http://www.yourweblog.com/yourfile.html">About</a>

Moonfruit3


Step Three – Adjust Settings

  • Replace ‘http://www.yourweblog.com/yourfile.html’ with the url of the page you wish to have pop-up. Ensure to remove the hash (#) character and one of the forward slash (/) characters from the URL which are often found in Moonfruit URL extensions.
  • In this instance the pop-up window is set to pop-up on click at the size of 500px x 500px. You can adjust these sizes by changing the width and height values. The size can’t be the same as the text-box we created in step one; as it needs to be just slightly larger as this is the size of the pop-up box itself. So assuming that your text box is 615 x 110 you should make your pop-up box 625 x 120.
  • The About section can be changed to any text you want as this is the hyperlink text that will be visible on your page for your visitors to click to open the pop-up box..

Once you have adjusted to your preferences, simply hit apply and save the page. You can now preview your site to test that the link is working. If all is well you should get a pop-up box appear on-click as shown in the example image below. Enjoy, any questions please don’t hesitate to ask me in the comments section below.

Moonfruit1

Result…

Watch out for more Moonfruit tips and tutorials in the coming months or subscribe to our RSS for all the latest updates.

About Fabrizio Van Marciano

Fabrizio Van Marciano is the founder and editor of Magnet4Marketing Blogging and Online Business Tips. You can learn more about him here and follow him on -
Google+ | Twitter | Facebook | LinkedIn |

Comments

  1. Can Pop-up blockers block this kind of pop-up windows?!

    • Fabrizio Van Marciano says:

      Well I have a pop-up blocker set on my computers but I can still get the pop-up to come up all of the browsers. This is an an ‘on click demand’ pop-up and not an automtic one so should be ok.

  2. A very interesting and informative article as always, many thanks for sharing.

  3. Hmm, I can’t seem to get this to work – I get “Firefox can’t find the file at http://www.itsmycow.com/cgi-bin/”#”.” come up.
    I’d be grateful for your thoughts.

    • Fabrizio says:

      Hi Hywel, thanks for stopping by. Moonfruit has since applied some updates which seems to have affected some html. I am updating the code on this post as I speak right now so check back soon.

  4. Javascript Countdown Timer says:

    very cool & good tips, thank you very much for sharing. But what is Moonfruits? free or commercial?

    • Fabrizio Van Marciano says:

      Thanks for check out the tutorial man. Moonfruit is a free and premium if you wish site building tool I have used them for the last 8 years for many web projects. Easy, reliable and boasts many features and benefits.

  5. Fabrizio Van Marciano says:

    Code has been updated 16/06/2011 ;)

  6. Morgan Gonzales says:

    Great infograph. I learn something new again, you deliver it very well. Java script is one of the computer programming software that ever exist but many software’s have been evolve now but I’ll go with java script. Thanks for showing this up. Keep sharing!

  7. Hi there… do you know how I can set up a ‘Star Rating’ on y Moonfruit site please?

  8. Hi Fabrizio
    I really appreciate your work on this but I simply cannot get it to work. I’ve tried 3 browsers (IE, Chrome and Firefox) and copied your new code changing only the urls, odd characters and page size, but I always get a full page version of the home page.
    Am I missing something blindingly obvious here?

  9. Hi all, thanks for visiting this post and using the code in your Moonfruit site. I know that some of you may have had some difficulty implementing the code. I have checked it again, made some minor changes once again and tested it on my own Moonfruit site and it’s working fine, please do let me know how you all get on with the updated code as of the date of this comment :)

    I’ve removed the font face, size and colour options as this doesn’t seem to function too well with Moonfruit’s HTML snippet.

    Thanks again :)

  10. Samantha Wright says:

    Great tutorial Fabrizio, just what I needed thanks :)

  11. Hi Fabrizio
    It works! Fantastic – I’ve been trying to get this working for 12 months!
    Much much appreciated!
    Hywel

  12. Coleen Tillman says:

    I’d be grateful for your thoughts. I’ve tried 3 browsers (IE, Chrome and Firefox) and copied your new code changing only the urls, odd characters and page size, but I always get a full page version of the home page.

Speak Your Mind

*