在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.   } m.survivalescaperooms.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.           });m.survivalescaperooms.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然后修改它.