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