How does Drupal7 extend Overlay?

After Drupal7, we can easily use the overlay module similar to the modal box to implement a pop-up layer. Next I will introduce two instances and how to customize the extended Overlay. The extended Overlay module displays the user Avatar instance in the header of your custom... after Drupal 7, we can easily use the overlay module similar to the modal box to implement a pop-up layer. Next I will introduce two instances and how to customize the extended Overlay.

Extended Overlay module head display user profile instance

Add the overlay script JS file to your custom module and use the overlay hook:

function mymodule_overlay_child_initialize() {  // Add our custom JavaScript.  drupal_add_js(drupal_get_path('module', 'mymodule') . '/overlay-child.js');}

Then, Add the JS Avatar path to the header.

 picture) && is_string($user->picture)) {        $picture = file_load($user->picture);    } elseif (isset($user->picture) && is_object($user->picture)) {        $picture = $user->picture;    }    if (isset($picture) && $picture && isset($picture->uri)) {        $filepath = file_create_url($picture->uri);        $javascript['settings']['data'][]['user_picture'] = $filepath;    }}?>

Add the following Javascript code to the overlay-child. js file:

(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('');                }            }).addClass('your-module-adjusted');            $('.overlay .footer').hide();        }    };})(jQuery);

After that, you can see the effect of the above image.

Modifies the width of the overlay layer and the hidden element instance.

The following example shows how to modify the content in the overlay layer. when a specified node type (test) is displayed in the overlay layer. This script shows you how to modify the overlay layer width to pixel PX and hide elements you don't want to see.

In your module, you also need to add the overlay-child.js script as in the above example.

Add the following Javascript code to the overlay-child.js file:

(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);

If you want to modify the layout of all overlay layers, find overlay. tpl. php and modify it.