Author - Robert Popovic

Founder and Technical Director of LERO9, a web agency specializing in Magento and WordPress design and development.

I launched Magebase in April, 2010 and am its editor and contributor. My main topics of interest are Magento development, customization and how to get the most out of Magento with the least amount of headache.

More Info » Follow me on Twitter »

Reader Comments (39)

  1. Magentalliage
    November 7, 2011 at 11:18 pm /

    Hi, thanks for this code but in the compare window, ‘Close Windows’ Button don’t work 🙁

  2. Mooshi
    November 8, 2011 at 9:24 am /

    Thanks very much Robert…excellent! mod 😉

  3. Kamil
    November 9, 2011 at 9:46 pm /

    Thanks for great article. I just have done all of this for my compare list.
    I can share additional js to close window with default “Close this window” button in compare list:
    1. Replace onclick=”window.close();” with onclick=”close_window()”;
    2. add this to js section in the end:

    function close_window() {
    	var elements = window.parent.document.getElementsByClassName('dialog');
    	for (i = 0; i < elements.length; i++){
    		id = elements[i];
    	id = id.replace('_close','');
    	window.parent.Windows.close(id, event);
    1. Stefan Schwann
      Stefan Schwann
      April 18, 2012 at 8:32 pm /

      Hello, i added the button and the javascript to my page. But in firefox the window won’t close. In every other browser it works but not in firefox. Do you have a idea what’s the solution for this problem is?

      best regards

      1. sunel
        August 31, 2012 at 11:08 pm /

        its not working in firefox please help

  4. Max
    November 24, 2011 at 5:12 am /

    Hello Beautiful people, i just saw this and i think is going to solve the problem i am having for long time now. Please can anyone put me in the right direction? I want create a block to put anywhere and any page on my magento site and to as soon as the page loads. I cannot realize it with this method, i know it is my fault, please how can i do it? In the parameter supplied in new window instance, where did the “className ” came from?

    Best Regards

  5. Jun Bagares
    Jun Bagares
    January 20, 2012 at 1:29 pm /

    The only local.xml file I found is the one from etc/local.xml which contains the configuration file. Are you actually referring to the page.xml or catalog.xml?


  6. Jun Bagares
    Jun Bagares
    January 20, 2012 at 2:02 pm /

    I added the below code to page.xml

        <reference name="head">
            <action method="addJs"><script>prototype/window.js</script></action>
            <action method="addItem"><type>js_css</type><name>prototype/windows/themes/default.css</name></action>
            <action method="addItem"><type>js_css</type><name>prototype/windows/themes/magento.css</name></action>
  7. Pavel
    February 14, 2012 at 10:26 pm /

    Robert, I am new to JavaScript, please help me.
    I want based on your example to make a pop-up message on the product page.
    How correctly do it?

  8. JW
    February 25, 2012 at 11:09 am /

    Hi Robert,

    Loved your posts about local.xml and on the easy pop.up, both helped a lot !

    Now I’m stuck with trying to change the appearance of my product comparison pop-up.
    The only thing I want to do is changing the order in which the attributes are shown … that’s all, but I can’t find where to change it.

    Can you direct me in the right direction ??

  9. Maier
    March 22, 2012 at 3:17 am /

    Thank you for the tutorial(s). How would i achieve this for a more simple purpose? I know the first step where you add the js / css is universal, but because this tutorial describes how to modify compare, it leaves me confused if i just wanted to make an <a> tag that pops up a window with some information — basically can you please provide me with more simple example to help the lesson hit home?



  10. bl3
    July 17, 2012 at 1:52 am /

    Hi Robert, thanks for the article.

    Quick question (I hope), can this be applied to the ‘subscribed to newsletter’ notification?

    I’m struggling to find where this is located in the mass of magento files!

    I thought it’d be a nice way of acknowledging the visitor signing up to the newsletter because you could add a discount code in the window as way of saying thank you.

  11. sunel
    July 19, 2012 at 10:15 pm /

    can i get value from the popup window ????how pleas help

  12. Neeraj
    November 12, 2012 at 5:44 pm /


    I am working on base theme of magento.I added this code in following file:
    and follow all steps as you said above but nothing happened. Plz help to open compare products in popup window not in new window.

  13. Neeraj
    November 12, 2012 at 7:28 pm /

    Hi Robert,
    This is working fine but it is showing whole page in a pop up window.I need only content area page to show.
    I actually showing product detail page in a popup window.Your code worked but showing whole page with header footer. I only want to show content of that page in popup.What should I do for that?Plz help

  14. Neeraj
    November 16, 2012 at 6:30 pm /

    Is this post is closed or here is nobody for my help…?

  15. ouafae
    February 23, 2013 at 1:50 am /

    Thanks for the example, but is that just for front end? what about backend pop up?

  16. Naresh
    June 27, 2013 at 7:06 pm /


    Thanks every body its working fine But now i want a pop up window it has to display all categories in the form of tree structure if i do any thing here it has to update dynamically in the back end also.

    please help me

    I am new to the magento & i m using CE1.7


  17. İlkerb
    November 2, 2013 at 4:32 am /

    I am trying to make this work on clean install of CE (with sample data). I’ve created local.xml in /app/design/frontend/default/default/layout/ (this is a clean installation and in system settings “default” package is selected, no specific theme selection is made) and placed those references.

    Modified Compare button in app/design/frontend/base/default/template/catalog/product/compare/sidebar.phtml and placed new compare function script.

    Overrided location function as it’s said in app/design/frontend/base/default/template/catalog/product/compare/list.phtml

    And whe I click compare button, nothing happens, no errors no mistakes. I am looking page source for windows.js but i can’t see its called in there. Can someone help me on this??

  18. Praful Rajput
    February 19, 2014 at 12:35 am /

    Thanks for sharing useful knowledge !!!

  19. amit
    March 22, 2014 at 2:54 am /

    not any change will done

  20. Joe
    April 16, 2014 at 12:16 am /

    I want to display the order success message in the popup once the order was confirmed instead of redirecting to the success page.

  21. Manoj Sonawanwe
    May 9, 2014 at 6:43 pm /

    Hi Robert Popovic
    I have used this tips and create quickview in product details page , it working fine.

    For refere- link
    you have to click on thumb image of 3 product you get view like product detail page in popup window. its ok
    but i do not want to show header and footer in that popup . how can we do it . i am waiting for your reply,

    Manoj Sonawane

  22. Peter Son
    Peter Son
    June 5, 2014 at 3:45 am /

    Thank you for your tip, Robert.

    I think that this tip is great for developer but it is a little hard for guys like me.
    I tried to do things you guide step by step but i failed.
    Finally, i find out a extension to create pop up for my Magento site here: WisePops
    It help me easily to add pop up to my site without coding knowledge. So i hope that it also help other guys like me.

    Anyway, your tip is great and thank you for sharing.

    Peter Son

  23. bright
    February 7, 2015 at 8:28 pm /

    Hi Robert Popovic,

    how i can hompage message and checkout message with window.js

  24. ravi
    October 22, 2015 at 5:36 am /

    hey guys im trying to add onload popup for my site im unable to do can u tel me how to do it

  25. vijayakumar
    July 7, 2016 at 4:31 pm /

    Great article. Its very useful for me

    Also i found a bug and solution for this ‘close button’ and CSS is not supporting.

    Just replace a line in ‘local.xml’ from

    <action method="addItem"><type>js_css</type><name>prototype/windows/themes/magento.css</name></action>


    <action method="addCss"><stylesheet>lib/prototype/windows/themes/magento.css</stylesheet></action>

    By doing this ‘close button’ and the popup border and its Styles are working good.

  26. vijayakumar
    August 5, 2016 at 6:58 pm /

    Hi team,

    can u help me in closing the popup by click outside the (popup) window.


Add a Comment & Join the Discussion

Insert small snippets of code by using [code]{your_code_here}[/code]
For larger code blocks please use and paste your link.

You may also use the following HTML in your comment: <a href="" title=""> <abbr title="">
<acronym title=""> <blockquote cite=""> <cite> <em> <strike> <strong>