Join Now

Creating Small Pop-Up Windows in Adobe Muse

Check out the latest video from MuseThemes.com explaining how you can use embedded HTML to control the size of your pop-up windows. By simply embedding a small snippet of code in your website and creating a unique link, you have complete control over the exact pixel dimensions of a link that opens in a new window. We recommend trying it out for contact forms (sign-up boxes), photo galleries or areas of your site that you might need a link containing "more information".

Embed Code:

Hyperlink Code:

Enjoy!
Cheers from MuseThemes.com

Tags: Tutorials
Steve Harris
Steve Harris / Calgary, Canada

Steve Harris started MuseThemes in 2011 and steadily grew the company, going from a full-time corporate employee to being his own boss. More than just MuseThemes, Steve is a conference speaker, Lynda.com author, and holds equally large collections of both business books and fine scotch.

Comments

Jason Johnson
Jason Johnson

Thanks so much for that tutorial. I tried using your technique but when pressing on the “link,” nothing happened. I think maybe I didn’t type the code in correctly. Can you email or post the code so that I can copy and paste it? Thanks a lot!

MuseThemes.com
MuseThemes.com

Hi Jason – My apologies, that should have been included from the start. Thanks for requesting it! I’ve included the code now for you to copy / paste.

Jason Johnson
Jason Johnson

Thanks so much, Steve! It works! I’m using this technique to open a popup window and play a movie. Is there any way to have the popup window come up and display a different title than the URL link? I’d like to have the title of the movie displayed. Thanks a lot!

Mark Loraine
Mark Loraine

Hi, great article, as I am not a coder, could you explain how I would bring up a page from my own site using this script – i.e. instead of javascript:popUp(‘http://www.yourwebsite.com’) I would like javascript:popUp(page on my own site.

Thanks in advance for your help.

Mark

MuseThemes.com
MuseThemes.com

@Mark – you would need to reference the direct link to that specific page on your site within the “popup” code. So for example if you had a page on your website called “about”, the direct link to it would be www.yourwebsite.com/about.html

It’s important that you include the .html on your link, as simply doing /about will look for a subfolder using that name, rather than the page.

If you’re having trouble figuring out the direct link to that page, you can always publish your site to the web, navigate to that page and reference the link in the address bar.

@Jason – the pop up window is probably displaying the “title” attributes from the particular page you’re pulling up. If it’s a Muse page, you would set the title in the page properties > metadata section. Without lookin g at it though it’s difficult to say – do you have a sample for reference that I can look at? Feel free to post the link (I’ll approve the comment as not-spam).

Hope this helps!

Cheers,
Steve Harris

vijay sharma
vijay sharma

thanks so much..

Andrew Galli
Andrew Galli

Hi there, I love your Muse support! I am using your pop-up window, and I have a question.

Is there a way to produce a pop-up window in Muse that does not contain the URL information? I want to have videos open inside these windows but I don’t want the URL address to be visible when the pop-up box is open.

Here’s the page I am talking about:

http://gallifilms.com/creating-wire-beaded-jewelry-watch-now.html

Click “INTRODUCTION” and you see the pop-up window, but you see as well the URL. Is there a way to turn this off?

Cheers – Andrew

Vipul
Vipul

Anyway to show a popup if a user leaves the site? For example, I have a email form that I want them to click on. If they don’t click on it Join in the email sign up. If they don’t, I want a gentle pop up reminder before they leave the website to sign up. Anyway to do this in the event they have not clicked on the Join button before they leave the website?

Kylie
Kylie

Thatnks for the info.

How about if you woud like a pop window for a file, such as a pdf or jpg?

Sandra Betancourt
Sandra Betancourt

The pop up window works great on Google but if I try to open it on Internet Explorer, it gives me the message: “Can’t display page”. How can I fix it so it will pop up on internet explorer or other browsers.

Gareth Beale
Gareth Beale

Apparently things that look like HTML don’t appear in the comments. The xample was supposed to be (inside anchor tags):

a href=“popUp(‘http://www.yourwebsite.com’)”

vs.

a href=“#” onclick=“popUp(‘http://www.yourwebsite.com’)”

Gareth Beale
Gareth Beale

There’s a fundamental problem with this approach in that it is not browser-agnostic. Essentially the problem is that the behaviour is different in some browsers if you create the anchor tag with a direct href to javascript vs. using the “onclick” attribute. i.e.

href=“javascript:popUp(‘http://www.yourwebsite.com’)”

vs.

href=“#” onclick=“javascript:popUp(‘http://www.yourwebsite.com’)”

In Chrome they work the same, but in IE and Firefox (at least for IE8 and FF 24.x) only the “onclick” version works the way you want.

Unfortunately, Muse always creates the “href” type anchor, so if you want it to work in all browsers, this approach does not work.

This was a show-stopper for a while for me. I worked around it using embedded HTML but that is a very hands-on approach in conflict with the intent of Muse. I think they should tweak Muse so that you can specify “onclick” instead of “href”. There are philosophical arguments as to why this is better for javascript anyway.

Post A Comment

Trusted by over 50,000 Muse Designers

Join now to download our entire library of templates, widgets, and tutorials Join Now