How does Drupal7 extend Overlay?

Source: Internet
Author: User
Tags drupal
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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.