drupal使用bootstrap实现登陆界面弹窗显示

之前介绍过建立基于bootstrap的drupal主题,bootstrap不仅提供了方便美观的css,更提供了很多的js插件,比如popup功能,可以很方便的实现界面的弹窗显示,感觉很高大上啊,今天就继续用这个bootstrap主题来提供登陆弹窗。

 个人原创,版权所有,转载请注明原文出处,并保留原文链接:

http://www.embbnux.com/2014/09/08/drupal_use_bootstrap_let_login_popup/

一 添加用来登陆显示的界面

进入主题的templates目录编辑,复制原来的page.tpl.php到这个目录。

在</body>前面加入下面代码:


<div id="embbnux-login-popup" class="modal fade in"  tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display:none">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4>登陆</h4>
</div>
<div class="modal-body">
<?php
$elements = drupal_get_form("user_login");
$form = drupal_render($elements);
echo $form;
?>
</div>
<div class="modal-footer">
<a  class="btn btn-default" href="/user/register">注册</a>
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
</div>
</div>
</div>
</div>

 二 添加登陆按钮

在适当的位置添加下面html代码:


<button class="btn btn-primary navbar-right navbar-btn" data-toggle="modal" data-target="#embbnux-login-popup">登录/注册</button>

三 清除缓存

登陆drupal后,进行配置中清除缓存后,刷新页面,点击刚才添加的按钮,就会发现登陆窗口弹出来了。如果没有效果,查看下是否加入了jquery支持和bootstrap的支持。只有使用bootstrap主题才可以。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

Time limit is exhausted. Please reload the CAPTCHA.