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主题才可以。