基本的模態碼登錄集成在Joomla登錄表格

Question

我發現了一個很好的基本模式登錄對話框的代碼。我也有一個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> 

這是用來

<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部分的JavaScript，基本模式的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; ?> 

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