Button to show a modal popup

Rate this topic: Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.1.00 out of 6 based on 1 vote(s)
GK User
Sun Jan 05, 2014 11:39 pm
Reply with quote
Report this post
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!
User avatar
Fresh Boarder

GK User
Mon Jan 06, 2014 10:20 am
Reply with quote
Report this post
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.
User avatar
Moderator

GK User
Mon Jan 06, 2014 11:37 am
Reply with quote
Report this post
Thanks!
User avatar
Fresh Boarder

GK User
Tue Jan 07, 2014 6:13 pm
Reply with quote
Report this post
No problem.
If You will have any other questions, feel free to post new forum threads.
User avatar
Moderator


cron