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

Moonfruit is a simple-to-use online website building tool which I’ve used myself for many personal web projects.  If you’re a small business owner, and want to build a website without breaking the bank, or without needing to know a single line of code then Moonfruit is the perfect choice in my mind.  Moonfruit makes it possible for anyone to create a professional looking website for any occasion, using simple point, drag and drop editing.

You can learn more about Moonfruit here.

OK in this post I’m going to share with you a very quick tutorial on how to create a pop-up window in Moonfruit site using a simple JavaScript code.  This is a very simple process, so let’s begin.

Please note: Do not use this tutorial to create pop-ups that contain unsolicited advertising.

Step One – Create a new page in your Moonfruit site

First step is to create a new page in Moonfruit, and in the top left hand corner of this new page you’re going to add a text box around 615px wide and 110px high, depending on how big you want the pop-up box to be.  You can add what ever information or text you want in this box.  See my example below.

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

Step Two – Create link to the pop-up page

Now on any other page within your Moonfruit site, add a HTML snippet, as this is the page you’re going to add a link (anchor text) to the pop-up page you just created in step one.  Then copy and paste the following HTML code shown below, into your HTML snippet editor box under ‘Setup’.  See image below.

<a href="#"onclick="('http://www.yourwebsite.com/yourfile.html','popup','width=625,height=120,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>


Step Three – Make some adjustments

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

Once you have made the adjustments to your liking, simply hit apply and save the page.

You can now preview your site to test that the anchor link is working OK.  If all has gone well you should get a pop-up box appear on-click as shown in the example image below.  Enjoy, if you have any questions regarding this tip please don’t hesitate to leave me a question in the comment section below.


Did you enjoy reading this post? Why not signup for instant updates!

Click here to subscribe
  • http://bbcwebhosting.com/ Sally

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

    • Fabrizio Van Marciano

      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.

  • http://www.metalfrogstudios.com seo company

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

  • http://www.zigger.co.uk Hywel

    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

      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.

  • Javascript Countdown Timer

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

    • Fabrizio Van Marciano

      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.

      • http://www.thefountainbloomer.com Kendra

        Van,

        I was so pumped to see this post and I can’t wait to get the update on the code! You are a wealth of information.

  • Fabrizio Van Marciano

    Code has been updated 16/06/2011 ;)

  • Morgan Gonzales

    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!

  • Risha

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

    • http://www.magnet4marketing.net Fabrizio Van Marciano

      Hi Risha, I will look into creating a post about this in the next few weeks :)

  • http://www.zigger.co.uk Hywel

    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?

  • http://www.magnet4marketing.net Fabrizio Van Marciano

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

  • Samantha Wright

    Great tutorial Fabrizio, just what I needed thanks :)

  • http://www.zigger.co.uk Hywel

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

    • http://www.magnet4marketing.net Fabrizio Van Marciano

      Glad to hear that it works Hywel, enjoy :)

  • Coleen Tillman

    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.