geniv/nette-overlay

Overlay component for Nette Framework

Overlay

Installation

$ composer require geniv/nette-overlay

or, _(*1)

"geniv/nette-overlay": "^2.0"

require:, _(*2)

"php": ">=7.0",
"nette/nette": ">=2.4",
"geniv/nette-general-form": ">=1.0"

Include in application

neon configure:, _(*3)

services:
    - Overlay

usage:, _(*4)

protected function createComponentOverlay(Overlay $overlay): Overlay
{
    //$overlay->setTemplatePath(__DIR__.'/templates/overlayBegin.latte');
    //$overlay->setTemplatePathBoth(__DIR__.'/templates/overlayBegin.latte',__DIR__.'/templates/overlayEnd.latte');
    return $overlay;
}

usage:, _(*5)

data-specific in href custom-layer-1 correspond name by in {control overlay:begin ..., _(*6)

<a href="#" class="nette-overlay__open" data-specific="custom-layer-1" data-body-padding-fix="true" data-body-overflow-fix="true">Open custom layer #1</a>
...
{control overlay:begin 'custom-layer-1'}
or
{control overlay:begin 'custom-layer-1', 'class-modifier'}
content
{control overlay:end}

or extreme usage, better usage is: Multiplier, _(*7)

protected function createComponentOverlay1(Overlay $overlay): Overlay
{
    $overlay = clone $overlay;
    //$overlay->setTemplatePath(__DIR__.'/templates/overlayBegin.latte');
    return $overlay;
}

and latte:, _(*8)

{control overlay1:begin 'custom-layer-2'}form{control overlay1:end}

JS:, _(*9)

netteOverlayOpen([specificNetteOverlay, firstFocus, bodyOverflowFix, bodyPaddingFix]);
netteOverlayClose();