Button to show a modal popup

Hello,

I want to display a simple button to show some small content in a little modal popup (like the LOGIN in top). I thought this is based on Bootstrap but their codes won't work (while buttons do, but not the popups).

What should a code look like to show an external link in a small modal popup if using gk_musicstate?

By the way: I am new to gavick. I've been using Joomla since Mambo times and have used Rocket and Yoo Theme templates so far. I really like your work as it combines perfect layouting with tons of useful and needed features in combination with support of the most important components. Other template developers forgot about that facts in the past. Thanks!

There is no "standard" bootrap for popup's. The login one is called out with use of this JS code (you can find it in /template/musicstate/js/gk.scripts.js):

Code: Select all

   if(document.id('gkPopupLogin')) {
      var popup_overlay = document.id('gkPopupOverlay');
      popup_overlay.setStyles({'display': 'block', 'opacity': '0'});
      popup_overlay.fade('out');

      var opened_popup = null;
      var popup_login = null;
      var popup_login_h = null;
      var popup_login_fx = null;

      if(document.id('gkPopupLogin') && document.id('gkLogin')) {
         popup_login = document.id('gkPopupLogin');
         popup_login_fx = new Fx.Morph(popup_login, {duration:500, transition: Fx.Transitions.Circ.easeInOut}).set({'opacity': 0, 'margin-top': -50 });
         document.id('gkLogin').addEvent('click', function(e) {
            new Event(e).stop();
            popup_login.setStyle('display', 'block');
            popup_overlay.setStyle('height', document.body.getScrollSize().y);
            popup_overlay.fade(0.45);

            setTimeout(function() {
               popup_login_fx.start({'opacity': 1, 'margin-top': 0});
               opened_popup = 'login';
               popup_login.addClass('gk3Danim');
            }, 450);

            (function() {
               if(document.id('modlgn-username')) {
                  document.id('modlgn-username').focus();
               }
            }).delay(600);
         });
      }

      popup_overlay.addEvent('click', function() {
         if(opened_popup == 'login')   {
            popup_overlay.fade('out');
            popup_login.removeClass('gk3Danim');
            popup_login_fx.start({
               'opacity' : 0,
               'margin-top' : -50
            });
            setTimeout(function() {
               popup_login.setStyle('display', 'none');
            }, 450);
         }   
      });
   }


So you would need to create your custom popup box inside of /layouts/default.php file, set its display to none, then use code similar to above to show it.

Thanks!

No problem.
If You will have any other questions, feel free to post new forum threads.