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
    Magentalliage
    November 7, 2011 at 11:18 pm /

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

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

    Thanks very much Robert…excellent! mod 😉

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

    Hello!
    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].firstChild.id;
    		break;
    	}
    	id = id.replace('_close','');
    	window.parent.Windows.close(id, event);
    }
    
    Reply
    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
      Stefan

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

        its not working in firefox please help

        Reply
  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

    Reply
  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?

    Thanks…

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

    I added the below code to page.xml

    <default>
        <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>
        </reference>
    </default>
    Reply
  7. Pavel
    Pavel
    February 14, 2012 at 10:26 pm /

    Hi,
    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?

    Reply
  8. JW
    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 ??

    Reply
  9. Maier
    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?

    Thanks,

    Maier

    Reply
  10. bl3
    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.

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

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

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

    prototype/window.js
    js_cssprototype/windows/themes/default.css
    js_cssprototype/windows/themes/magento.css

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

    Reply
  13. Neeraj
    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

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

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

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

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

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

    Hi,

    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

    Thanks

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

    I am trying to make this work on clean install of CE 1.7.0.2 (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??

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

    Thanks for sharing useful knowledge !!!

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

    not any change will done

    Reply
  20. Joe
    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.

    Reply
  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
    http://103.247.98.206/~mmhtest2/index.php/scrap-book/bring-home-elephant.html
    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
    mssonawane@gmail.com

    Reply
  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

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

    Hi Robert Popovic,

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

    Reply
  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

    Reply
  25. vijayakumar
    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>

    As:

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

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

    Hi team,

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

    Reply

Add a Comment & Join the Discussion

Insert small snippets of code by using [code]{your_code_here}[/code]
For larger code blocks please use http://pastebin.com 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>