Module Pop Up - Search Module

Is there any way to duplicate this effect the login module using a module search? And then create an effect equal to that used for the storefront search module?

I copied the code storefront, but it did not work. I wanted just a search module that appear when clicked on his icon.

Hi

Please show me Your site so I'll see what can be done.

Hello,
follow site: http://agencia31.com.br/projeto/university/

I ended up installing the quickstart theme to get better.
As I said, just needed to put a search module that appear when clicked on its icon. This way would be to reduce the size of the menu navigation.
I sent an email with login details for you, if you are interested in taking a look. Anything, just ignore.

Hi

I've checked and looks like You can make it only by replacing login module in popup with search module. Simply publish search module in "login" module position. Than Login option will trigger search instead, so You will just need to rename Login to Search in menu manager.

So I had tried this before. However I want to use the login module that way too.
My difficulty would be how to create a new class to search it work equals gkLogin class.
I searched this class to study the code and not found. In that file I can find the gkLogin and create a new class from it?
I've studied how to create an equal position with the login, just need to know where you think this class.

Hi

Ok. I'm afraid template has only one popup for single module. Adding a new one is a customisation request and we do not support that, but here is the code used for Login You can modify and reuse:

HTML:

Code: Select all

<div id="gkPopupLogin">
          <div class="gkPopupWrap">
                    <div id="loginForm">
                              <h3><span>SEARCH</span></h3>
                              <div class="clear overflow">
                                        <div class="gkUserdata">
                                                  <jdoc:include type="modules" name="login" style="<?php echo $this->module_styles['login']; ?>" />
                                        </div>
                              </div>
                    </div>
          </div>
</div>
<div id="gkPopupOverlay"></div>


JS:

Code: Select all

   // login popup
   if(jQuery('#gkPopupLogin').length > 0) {
      var popup_overlay = jQuery('#gkPopupOverlay');
      popup_overlay.css({'display': 'block', 'opacity': '0'});
      popup_overlay.fadeOut();

      var opened_popup = null;
      var popup_login = null;
      var popup_login_h = null;
   
      if(jQuery('#gkPopupLogin').length > 0 && jQuery('.gkLogin').length > 0) {
         popup_login = jQuery('#gkPopupLogin');
         jQuery('.gkLogin').click(function(e) {
            e.preventDefault();
            e.stopPropagation();
            
            popup_overlay.css('opacity',0.01);
            popup_login.css('display', 'block');
         
            popup_overlay.css('height', jQuery('body').height());
            popup_overlay.fadeTo('slow', 0.45 );

            setTimeout(function() {
               popup_login.animate({'opacity': 1}, 500);
               opened_popup = 'login';
            }, 450);

            (function() {
               if(jQuery('#modlgn-username').length > 0) {
                  jQuery('#modlgn-username').focus();
               }
            }).delay(600);
         });
      }
      
      popup_overlay.click(function() {
         if(opened_popup === 'login')   {
            popup_overlay.fadeOut();
            popup_login.animate({'opacity' : 0}, 500);
            setTimeout(function() {
               popup_login.css('display', 'none');
            }, 450);
         }
      });      
   }