在Joomla登录表单中集成的基本模态代码登录

时间:2009-12-10 23:37:47

标签: javascript joomla modal-dialog

我找到了一个很好的基本模式登录对话框代码。我还有一个Joomla网站,我希望将基本的模态代码整合到一起。

例如,请点击下面的链接,然后选择“登录对话框”链接

Login Dialog Box

这是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>

这是使用的CSS代码

<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>

这是使用的javascript

<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>

这是Joomla登录HTML部分,基本模式的HTML代码应该适合某处的代码。

<?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; ?>

1 个答案:

答案 0 :(得分:1)

您需要触发simplemodal,假设您要绑定<div id="basic-modal-content">

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

演示和文档可在http://www.ericmmartin.com/projects/simplemodal/

获得