Connexion de code modale de base intégrée dans le formulaire de connexion Joomla

Question

J'ai trouvé un bon code pour une boîte de dialogue de connexion de base-modal. J'ai aussi un site Joomla auquel j'aimerais intégrer le code modal de base.

Pour un exemple, s'il vous plaît cliquer sur le lien en dessous et choisissez la "boîte de dialogue de connexion" lien

Login Dialog Box

Ceci est la partie HTML

<!-- #dialog is the id of a DIV defined in the code below --> 
<a href="#dialog" name="modal">Simple Modal Window</a> 

<div id="boxes"> 


    <!-- #customize your modal window here --> 

    <div id="dialog" class="window"> 
     <b>Testing of Modal Window</b> | 

     <!-- close button is defined as close class --> 
     <a href="#" class="close">Close it</a> 

    </div> 


    <!-- Do not remove div#mask, because you'll need it to fill the whole screen -->  
    <div id="mask"></div> 
</div> 

C'est le CSS code utilisé

<style> 

/* 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; 
} 
</style> 

C'est le javascript utilisé

<script> 

$(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(); 
    });   

}); 

</script> 

Ceci est la partie HTML de connexion Joomla, le code HTML du modal de base doit tenir dans le sous code à un endroit.

<?php // no direct access 
defined('_JEXEC') or die('Restricted access'); ?> 
<?php if($type == 'logout') : ?> 
<form action="index.php" method="post" name="login" id="form-login"> 
<?php if ($params->get('greeting')) : ?> 
    <div> 
    <?php if ($params->get('name')) : { 
     echo JText::sprintf('HINAME', $user->get('name')); 
    } else : { 
     echo JText::sprintf('HINAME', $user->get('username')); 
    } endif; ?> 
    </div> 
<?php endif; ?> 
    <div align="center"> 
     <input type="submit" name="Submit" class="button" value="<?php echo JText::_('BUTTON_LOGOUT'); ?>" /> 
    </div> 

    <input type="hidden" name="option" value="com_user" /> 
    <input type="hidden" name="task" value="logout" /> 
    <input type="hidden" name="return" value="<?php echo $return; ?>" /> 
</form> 
<?php else : ?> 
<?php if(JPluginHelper::isEnabled('authentication', 'openid')) : 
     $lang->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 = &JFactory::getDocument(); 
     $document->addScriptDeclaration($langScript); 
     JHTML::_('script', 'openid.js'); 
endif; ?> 
<form action="<?php echo JRoute::_('index.php', true, $params->get('usesecure')); ?>" method="post" name="login" id="form-login" > 
    <?php echo $params->get('pretext'); ?> 
    <fieldset class="input"> 
    <p id="form-login-username"> 
     <label for="modlgn_username"><?php echo JText::_('Username') ?></label><br /> 
     <input id="modlgn_username" type="text" name="username" class="inputbox" alt="username" size="18" /> 
    </p> 
    <p id="form-login-password"> 
     <label for="modlgn_passwd"><?php echo JText::_('Password') ?></label><br /> 
     <input id="modlgn_passwd" type="password" name="passwd" class="inputbox" size="18" alt="password" /> 
    </p> 
    <?php if(JPluginHelper::isEnabled('system', 'remember')) : ?> 
    <p id="form-login-remember"> 
     <label for="modlgn_remember"><?php echo JText::_('Remember me') ?></label> 
     <input id="modlgn_remember" type="checkbox" name="remember" class="inputbox" value="yes" alt="Remember Me" /> 
    </p> 
    <?php endif; ?> 
    <input type="submit" name="Submit" class="button" value="<?php echo JText::_('LOGIN') ?>" /> 
    </fieldset> 
    <ul> 
     <li> 
      <a href="<?php echo JRoute::_('index.php?option=com_user&view=reset'); ?>"> 
      <?php echo JText::_('FORGOT_YOUR_PASSWORD'); ?></a> 
     </li> 
     <li> 
      <a href="<?php echo JRoute::_('index.php?option=com_user&view=remind'); ?>"> 
      <?php echo JText::_('FORGOT_YOUR_USERNAME'); ?></a> 
     </li> 
     <?php 
     $usersConfig = &JComponentHelper::getParams('com_users'); 
     if ($usersConfig->get('allowUserRegistration')) : ?> 
     <li> 
      <a href="<?php echo JRoute::_('index.php?option=com_user&view=register'); ?>"> 
       <?php echo JText::_('REGISTER'); ?></a> 
     </li> 
     <?php endif; ?> 
    </ul> 
    <?php echo $params->get('posttext'); ?> 

    <input type="hidden" name="option" value="com_user" /> 
    <input type="hidden" name="task" value="login" /> 
    <input type="hidden" name="return" value="<?php echo $return; ?>" /> 
    <?php echo JHTML::_('form.token'); ?> 
</form> 
<?php endif; ?> 

Answer 1

Vous devez déclencher SimpleModal, en supposant que vous voulez lier <div id="basic-modal-content">

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $("#basic-modal-content").modal(); 
    }); 
</script> 

Demo et la documentation sont disponibles à http://www.ericmmartin.com/projects/simplemodal/