Hi,
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.
For a example, please click the link beneath and choose the "login dialog box" link
This is the HTML Part
<!-- #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>
This is the CSS code used
<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>
This is the javascript used
<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>
This is the Joomla login HTML part, the HTML code of the basic modal should fit in the beneath code somewhere.
<?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; ?>