title: Basic modal code login intergrated in Joomla login form
body: <p>I have found a nice code for a basic-modal login dialog. I also have a Joomla website which I'd like to have the basic modal code intergrated to.</p>
  
  <p>For a example, please click the link beneath and choose the "login dialog box" link</p>
  
  <p><a href="http://www.queness.com/resources/html/modal/jquery-modal-window.html" rel="nofollow noreferrer">Login Dialog Box</a></p>
  
  <p><strong>This is the HTML Part</strong></p>
  
  <pre><code>&lt;!-- #dialog is the id of a DIV defined in the code below --&gt;
  &lt;a href="#dialog" name="modal"&gt;Simple Modal Window&lt;/a&gt;
  
  &lt;div id="boxes"&gt;
  
  
      &lt;!-- #customize your modal window here --&gt;
  
      &lt;div id="dialog" class="window"&gt;
          &lt;b&gt;Testing of Modal Window&lt;/b&gt; | 
  
          &lt;!-- close button is defined as close class --&gt;
          &lt;a href="#" class="close"&gt;Close it&lt;/a&gt;
  
      &lt;/div&gt;
  
  
      &lt;!-- Do not remove div#mask, because you'll need it to fill the whole screen --&gt;    
      &lt;div id="mask"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>This is the CSS code used</strong></p>
  
  <pre><code>&lt;style&gt;
  
  /* Z-index of #mask must lower than #boxes .window */
  #mask {
    position:absolute;
    z-index:9000;
    background-color:#000;
    display:none;
  }
  
  #boxes .window {
    position:absolute;
    width:440px;
    height:200px;
    display:none;
    z-index:9999;
    padding:20px;
  }
  
  
  /* Customize your modal window here, you can add background image too */
  #boxes #dialog {
    width:375px; 
    height:203px;
  }
  &lt;/style&gt;
  </code></pre>
  
  <p><strong>This is the javascript used</strong></p>
  
  <pre><code>&lt;script&gt;
  
  $(document).ready(function() {  
  
      //select all the a tag with name equal to modal
      $('a[name=modal]').click(function(e) {
          //Cancel the link behavior
          e.preventDefault();
          //Get the A tag
          var id = $(this).attr('href');
  
          //Get the screen height and width
          var maskHeight = $(document).height();
          var maskWidth = $(window).width();
  
          //Set height and width to mask to fill up the whole screen
          $('#mask').css({'width':maskWidth,'height':maskHeight});
  
          //transition effect     
          $('#mask').fadeIn(1000);    
          $('#mask').fadeTo("slow",0.8);  
  
          //Get the window height and width
          var winH = $(window).height();
          var winW = $(window).width();
  
          //Set the popup window to center
          $(id).css('top',  winH/2-$(id).height()/2);
          $(id).css('left', winW/2-$(id).width()/2);
  
          //transition effect
          $(id).fadeIn(2000); 
  
      });
  
      //if close button is clicked
      $('.window .close').click(function (e) {
          //Cancel the link behavior
          e.preventDefault();
          $('#mask, .window').hide();
      });     
  
      //if mask is clicked
      $('#mask').click(function () {
          $(this).hide();
          $('.window').hide();
      });         
  
  });
  
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>This is the Joomla login HTML part, the HTML code of the basic modal should fit in the beneath code somewhere.</strong></p>
  
  <pre><code>&lt;?php // no direct access
  defined('_JEXEC') or die('Restricted access'); ?&gt;
  &lt;?php if($type == 'logout') : ?&gt;
  &lt;form action="index.php" method="post" name="login" id="form-login"&gt;
  &lt;?php if ($params-&gt;get('greeting')) : ?&gt;
      &lt;div&gt;
      &lt;?php if ($params-&gt;get('name')) : {
          echo JText::sprintf( 'HINAME', $user-&gt;get('name') );
      } else : {
          echo JText::sprintf( 'HINAME', $user-&gt;get('username') );
      } endif; ?&gt;
      &lt;/div&gt;
  &lt;?php endif; ?&gt;
      &lt;div align="center"&gt;
          &lt;input type="submit" name="Submit" class="button" value="&lt;?php echo JText::_( 'BUTTON_LOGOUT'); ?&gt;" /&gt;
      &lt;/div&gt;
  
      &lt;input type="hidden" name="option" value="com_user" /&gt;
      &lt;input type="hidden" name="task" value="logout" /&gt;
      &lt;input type="hidden" name="return" value="&lt;?php echo $return; ?&gt;" /&gt;
  &lt;/form&gt;
  &lt;?php else : ?&gt;
  &lt;?php if(JPluginHelper::isEnabled('authentication', 'openid')) :
          $lang-&gt;load( 'plg_authentication_openid', JPATH_ADMINISTRATOR );
          $langScript =   'var JLanguage = {};'.
                          ' JLanguage.WHAT_IS_OPENID = \''.JText::_( 'WHAT_IS_OPENID' ).'\';'.
                          ' JLanguage.LOGIN_WITH_OPENID = \''.JText::_( 'LOGIN_WITH_OPENID' ).'\';'.
                          ' JLanguage.NORMAL_LOGIN = \''.JText::_( 'NORMAL_LOGIN' ).'\';'.
                          ' var modlogin = 1;';
          $document = &amp;JFactory::getDocument();
          $document-&gt;addScriptDeclaration( $langScript );
          JHTML::_('script', 'openid.js');
  endif; ?&gt;
  &lt;form action="&lt;?php echo JRoute::_( 'index.php', true, $params-&gt;get('usesecure')); ?&gt;" method="post" name="login" id="form-login" &gt;
      &lt;?php echo $params-&gt;get('pretext'); ?&gt;
      &lt;fieldset class="input"&gt;
      &lt;p id="form-login-username"&gt;
          &lt;label for="modlgn_username"&gt;&lt;?php echo JText::_('Username') ?&gt;&lt;/label&gt;&lt;br /&gt;
          &lt;input id="modlgn_username" type="text" name="username" class="inputbox" alt="username" size="18" /&gt;
      &lt;/p&gt;
      &lt;p id="form-login-password"&gt;
          &lt;label for="modlgn_passwd"&gt;&lt;?php echo JText::_('Password') ?&gt;&lt;/label&gt;&lt;br /&gt;
          &lt;input id="modlgn_passwd" type="password" name="passwd" class="inputbox" size="18" alt="password" /&gt;
      &lt;/p&gt;
      &lt;?php if(JPluginHelper::isEnabled('system', 'remember')) : ?&gt;
      &lt;p id="form-login-remember"&gt;
          &lt;label for="modlgn_remember"&gt;&lt;?php echo JText::_('Remember me') ?&gt;&lt;/label&gt;
          &lt;input id="modlgn_remember" type="checkbox" name="remember" class="inputbox" value="yes" alt="Remember Me" /&gt;
      &lt;/p&gt;
      &lt;?php endif; ?&gt;
      &lt;input type="submit" name="Submit" class="button" value="&lt;?php echo JText::_('LOGIN') ?&gt;" /&gt;
      &lt;/fieldset&gt;
      &lt;ul&gt;
          &lt;li&gt;
              &lt;a href="&lt;?php echo JRoute::_( 'index.php?option=com_user&amp;view=reset' ); ?&gt;"&gt;
              &lt;?php echo JText::_('FORGOT_YOUR_PASSWORD'); ?&gt;&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;a href="&lt;?php echo JRoute::_( 'index.php?option=com_user&amp;view=remind' ); ?&gt;"&gt;
              &lt;?php echo JText::_('FORGOT_YOUR_USERNAME'); ?&gt;&lt;/a&gt;
          &lt;/li&gt;
          &lt;?php
          $usersConfig = &amp;JComponentHelper::getParams( 'com_users' );
          if ($usersConfig-&gt;get('allowUserRegistration')) : ?&gt;
          &lt;li&gt;
              &lt;a href="&lt;?php echo JRoute::_( 'index.php?option=com_user&amp;view=register' ); ?&gt;"&gt;
                  &lt;?php echo JText::_('REGISTER'); ?&gt;&lt;/a&gt;
          &lt;/li&gt;
          &lt;?php endif; ?&gt;
      &lt;/ul&gt;
      &lt;?php echo $params-&gt;get('posttext'); ?&gt;
  
      &lt;input type="hidden" name="option" value="com_user" /&gt;
      &lt;input type="hidden" name="task" value="login" /&gt;
      &lt;input type="hidden" name="return" value="&lt;?php echo $return; ?&gt;" /&gt;
      &lt;?php echo JHTML::_( 'form.token' ); ?&gt;
  &lt;/form&gt;
  &lt;?php endif; ?&gt;
  </code></pre>