Drupal 7 扩展Overlay的方法详解?

在Drupal 7 以后我们可以轻松使用类似模态框的overlay模块来实现一个弹出层,下面我介绍2个实例,如何自定义扩展Overlay.

扩展 Overlay 模块头部显示用户头像实例,在你的自定义模块中加入overlay脚本JS文件,通过overlay的钩子,代码如下:

1. function mymodule_overlay_child_initialize() { 
2.   // Add our custom JavaScript. 
3.   drupal_add_js(drupal_get_path('module', 'mymodule') . '/overlay-child.js'); 
4. }然后通过Add JS 头像路径到header中。 
5.  
6. /** 
7.  * @see hook_js_alter(). 
8.  */ 
9. function yourtheme_js_alter(&$javascript) { 
10.   global $theme, $user; 
11.   if (isset($user->picture) && is_string($user->picture)) { 
12.     $picture = file_load($user->picture); 
13.   } www.phpfensi.com 
14.   elseif (isset($user->picture) && is_object($user->picture)) { 
15.     $picture = $user->picture; 
16.   } 
17.   if (isset($picture) && $picture && isset($picture->uri)) { 
18.     $filepath = file_create_url($picture->uri); 
19.     $javascript['settings']['data'][]['user_picture'] = $filepath; 
20.   } 
21. } 

在overlay-child.js文件中加入以下Javascript代码:

1. (function ($) { 
2.     Drupal.behaviors.yourmodule = { 
3.         attach: function (context) { 
4.             $('#overlay:not(.your-module-adjusted)', context).each(function() { 
5.                 if (Drupal.settings.user_picture) { 
6.                     $('#overlay-titlebar', this).css('padding-left', 0); 
7.                     $('#overlay-title-wrapper', this).find('h1#overlay-title').prepend('<img src="'+Drupal.settings.user_picture+'" />'); 
8.                 } 
9.             }).addClass('your-module-adjusted'); 
10.             $('.overlay .footer').hide(); 
11.         } 
12.     }; 
13. })(jQuery); 

修改overlay覆盖层的宽度和隐藏元素实例,下面这个例子向你展示如何修改overlay (覆盖层) 内的内容,当一个指定的节点类型（test）被展示在overlay 覆盖层,这个脚本向你展示修改overlay层的宽度为450px 和 隐藏一些不想见到的元素.

在你的模块中同样需要想上面的例子那样加入overlay-child.js脚本,在overlay-child.js文件中加入以下Javascript 代码:

1. (function ($) { 
2.   // Adjust the overlay dimensions. 
3.   Drupal.behaviors.myModule = { 
4.     attach: function (context) { 
5.       $('#overlay:not(.mymodule-adjusted)', context).each(function() { 
6.         var $test = $(this).find('.node-type-test'); 
7.         if ($test.length){ 
8.           // adjust the overlay 
9.           $(this).css({ 
10.             'width'     : '450px', 
11.             'min-width' : '450px' 
12.           });www.phpfensi.com 
13.           $('.add-or-remove-shortcuts', this).hide();  // hide "add short-cut" button 
14.           $('#branding', this).hide();  // hide branding container 
15.         } 
16.       }).addClass('mymodule-adjusted'); 
17.     } 
18.   }; 
19. })(jQuery); 

如果你想修改所有overlay层里的布局,请找到overlay.tpl.php然后修改它.