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

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

function mymodule_overlay_child_initialize() { 
  // Add our custom JavaScript. 
  drupal_add_js(drupal_get_path('module', 'mymodule') . '/overlay-child.js'); 
}然后通过Add JS 头像路径到header中。 
 
/** 
 * @see hook_js_alter(). 
 */ 
function yourtheme_js_alter(&$javascript) { 
  global $theme, $user; 
  if (isset($user->picture) && is_string($user->picture)) { 
    $picture = file_load($user->picture); 
  } www.phprm.com 
  elseif (isset($user->picture) && is_object($user->picture)) { 
    $picture = $user->picture; 
  } 
  if (isset($picture) && $picture && isset(http://pic2.phprm.com/2014/09/22/$picture->uri.jpg)) { 
    $filepath = file_create_url($picture->uri); 
    $javascript['settings']['data'][]['user_picture'] = $filepath; 
  } 
}

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

(function ($) { 
    Drupal.behaviors.yourmodule = { 
        attach: function (context) { 
            $('#overlay:not(.your-module-adjusted)', context).each(function() { 
                if (Drupal.settings.user_picture) { 
                    $('#overlay-titlebar', this).css('padding-left', 0); 
                    $('#overlay-title-wrapper', this).find('h1#overlay-title').prepend('<img src="'+Drupal.settings.user_picture+'" />'); 
                } 
            }).addClass('your-module-adjusted'); 
            $('.overlay .footer').hide(); 
        } 
    }; 
})(jQuery);

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

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

(function ($) { 
  // Adjust the overlay dimensions. 
  Drupal.behaviors.myModule = { 
    attach: function (context) { 
      $('#overlay:not(.mymodule-adjusted)', context).each(function() { 
        var $test = $(this).find('.node-type-test'); 
        if ($test.length){ 
          // adjust the overlay 
          $(this).css({ 
            'width'     : '450px', 
            'min-width' : '450px' 
          });www.phprm.com 
          $('.add-or-remove-shortcuts', this).hide();  // hide "add short-cut" button 
          $('#branding', this).hide();  // hide branding container 
        } 
      }).addClass('mymodule-adjusted'); 
    } 
  }; 
})(jQuery);

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

文章链接：http://www.phprm.com/develop/fs5948.html

随便收藏，请保留本文地址！