I have some pop ups like:

  • Popup that open when user stay in site above 30 seconds/visit X pages etc...
  • Popup that open when user click on login/register/some button etc...

Each popup have a black background (with opacity) and I think to do that like that:

  1. Create an appropriate DOM container that loads in all pages:

    <div id="popup-container" style="display: none">
        <div class="close-btn">X</div>
        <div class="background-overlay-popupLoader"></div> 
        <div class="popup-content center-mid"></div>  
  2. Create a module that handle the Ajax requests via controllers:


<?xml version="1.0" encoding="utf-8" ?>


    class Michael_PopupLoader_IndexController extends Mage_Core_Controller_Front_Action {
        public function loginAction(){
            /*First way*/
            /*Second way*/
            $block = $this->getLayout()->createBlock('core/template')->setTemplate('customer/form/loginPopup.phtml');

As you see I tried two ways:

  1. Create block in the controller, it's works but then I can't do: $this->getChildHtml("anotherBlock") in loginPopup.phtml.
  2. Create layout file popupLoader.xml and I tried remove all code so I'll get only loginPopup.phtml (without the default blocks that load in any page like header, footer etc..) but I can't get rid from page/Xcolumns-right.phtml:
<layout version="0.0.1">
        <remove name="head" />
        <remove name="header" />
        <remove name="right" />
        <remove name="left" />
        <remove name="footer" />
        <block type="core/template" name="catalog.topnav" template="customer/form/loginPopup.phtml" />
  1. And finally load the block contents with ajax and I expect get loginPopup.phtml contents only! (without header/footer etc...):

    $(content).load("/popupLoader/index/login", function () { $(popupCont).fadeIn(); });

I don't sure that I am doing it right.

I'm trying to do that right? How should I do that?

I will appreciate any source-code, free-plugin, github-repo that I can learn from it.
Michael P.S: I tried to highlight my code but..

  • Hello Michael, welcome to Magento SE. Could you please show us the files that you have tried ? could you please be more specific to your question. Question seems to be too broad now. – Rajeev K Tomy Aug 24 '15 at 3:48
  • @RajeevKTomy you absolutely right, I edited my question. Thank you. – Michael Aug 24 '15 at 7:33
  • seems a bit over complex for a popup, why don't you just put the html required for the modal popup into the footer? – paj Aug 24 '15 at 10:29
  • @paj Do you mean load them all and then display:none? because I have a lot of pop ups, it's will be mistake to load them in any page, magento is heavy without our help :) so I trying to load the popup content only when required. – Michael Aug 24 '15 at 10:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.