Ideally I want to use Observers when a client presses the buttons "Add to basket" or "Proceed to Checkout" to make a pop up window and make some suggestions on products. My problem is how can we make a pop up window with magento. Is there a way to make a .phtml and use that as a pop up window? Or the only way is to do it using jquery. I don't want to change the standard behaviour of the buttons, just to add some suggestions with products from the site.

up vote 8 down vote accepted

First of all create extension in lacal pool.

In layout xml of your extension add prototype window library call(it is included in magento but is not called).

<reference name="head">
    <action method="addItem">
        <type>js</type>
        <name>prototype/window.js</name>
    </action>
</reference>

After in template where you want to open popup add javascript code

function showPopup(sUrl) {
    oPopup = new Window({
        id:'popup_window',
        className: 'magento',
        url: sUrl,
        width: 820,
        height: 600,
        minimizable: false,
        maximizable: false,
        showEffectOptions: {
            duration: 0.4
        },
        hideEffectOptions:{
            duration: 0.4
        },
        destroyOnClose: true
    });
    oPopup.setZIndex(100);
    oPopup.showCenter(true);
}

function closePopup() {
    Windows.close('popup_window');
}
//here assign click event to a tag with href to the content you want to display in popup
document.observe("dom:loaded", function() {
    $$('button selector')[0].observe('click', function(oEvent) {
         showPopup($(this).readAttribute('href'));
     Event.stop(oEvent);
   });
});

More information about Window object usage you can find here.

This is working in this Captcha extension. So you can install it and take a look how it works.

  • how to call closePopup when user clock on x button – inrsaurabh Oct 27 '17 at 6:59

Checkout the below code for using magento's inbuilt lightbox and modify it as per requirement. Tried and Tested

add include below files using layout xml

<action method="addItem"><type>js</type><name>prototype/window.js</name></action>
<action method="addItem"><type>js_css</type><name>prototype/windows/themes/default.css</name></action>
<action method="addCss"><name>lib/prototype/windows/themes/magento.css</name></action>

below is the prototype function which will invoke the widowbox

function showPopup(sUrl) {
    oPopup = new Window({
    id:'popup_window',
    className: 'magento',
    url: sUrl,
    width: 820,
    height: 600,
    minimizable: false,
    maximizable: false,
    showEffectOptions: {
        duration: 0.4
    },
    hideEffectOptions:{
        duration: 0.4
    },
    destroyOnClose: true
    });
    oPopup.setZIndex(100);
    oPopup.showCenter(true);
}

function closePopup() {
    Windows.close('popup_window');
}

invoke function using below code

$('test_me').observe('click', function(event) {
    showPopup('<?php echo Mage::getUrl("customer/account/login") ?>');
    //Event.stop(oEvent);
});

protected by Community Dec 18 '14 at 13:01

Thank you for your interest in this question. Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).

Would you like to answer one of these unanswered questions instead?

Not the answer you're looking for? Browse other questions tagged or ask your own question.