PHPackages webcito/bs-layer - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. webcito/bs-layer ActiveLibrary[Utility & Helpers](/categories/utility) webcito/bs-layer ================ A lightweight sliding layer system for jQuery and Bootstrap 5. 1.0.6(9mo ago)325MIT Since Jul 16Pushed 9mo ago1 watchersCompare [ Source](https://github.com/ThomasDev-de/bs-layer)[ Packagist](https://packagist.org/packages/webcito/bs-layer)[ Docs](https://github.com/webcito/bs-layer)[ RSS](/packages/webcito-bs-layer/feed)WikiDiscussions main Synced 1mo ago READMEChangelog (7)Dependencies (3)Versions (8)Used By (0) bs-layer ======== [](#bs-layer) A lightweight sliding layer system for jQuery and Bootstrap 5. Supports stacking multiple layers, custom AJAX content, animation, and full keyboard support. [![](demo/img.png)](demo/img.png) --------------------------------- [](#) Features -------- [](#features) - Stackable sliding layers (like modals, but multi-level) - Smooth open/close animations - AJAX content loading support - Close all layers with a single call, stacked "top-down" - Callback support for all key events - Full Bootstrap 5 compatibility - Easily extensible with custom logic --- Installation ------------ [](#installation) Install with Composer (Bootstrap 5, Bootstrap-Icons & jQuery must be present): ``` composer require twbs/bootstrap twbs/bootstrap-icons components/jquery ``` **Or include JS/CSS manually:** ``` ``` --- Getting Started --------------- [](#getting-started) **HTML Example:** ``` Open layer ``` **JavaScript Usage:** ``` // Initialize a layer trigger const layerLogin = $('#layerLogin').bsLayer({ name: 'login-layer', // url: 'login.html', onPostBody: function ($content) { // Callback after content loaded } }); // You can send your own events to the layer $.bsLayer.customEvent('login-layer', 'event-name', ...params); // Or close all layers with once $.bsLayer.closeAll(); ``` --- API --- [](#api) ### Global Configuration [](#global-configuration) Global configuration options control the technical behavior and default appearance of **all** layers. They are set on the `$.bsLayer.config` object and can be changed at runtime using `$.bsLayer.setConfig()`. These settings affect AJAX requests, default breakpoints, animation speed, stacking order, and icon classes. Changes to the global config apply to all subsequently created layers unless overridden per-layer. See the table below for all available global configuration options: OptionTypeDefault / ExampleDescriptionajax.methodstring'GET'HTTP method used for AJAX requests (usually 'GET' or 'POST')ajax.contentTypestring'application/x-www-form-urlencoded; charset=UTF-8'Content-Type for AJAX submissionsfullWidthBreakpointnumber576Below this window width (px), layers use 100% of width (Bootstrap 'sm' breakpoint)firstLayerWithInPercentnumber0.80Percentage (e.g. 0.8 = 80%) of window width for first layerdistanceBetweenLayersnumber100Distance in px between stacked layersanimationDurationnumber600Show/hide animation duration in millisecondszIndexStartnumber1050z-index for bottom-most layer; each additional layer is placed higherparentstring'body'CSS selector: Where layers are appended in the DOMicons.closestring'bi bi-x-lg'Icon class for the close (X) button (Bootstrap Icons)icons.refreshstring'bi bi-arrow-clockwise'Icon class for refresh buttonicons.maximizestring'bi bi-arrows-angle-expand'Icon class for maximize buttonicons.minimizestring'bi bi-arrows-angle-contract'Icon class for minimize buttononErrorfunction`function($message) {}`Global error handler; called on AJAX or layer errors**Usage Example:** ``` // Example: Centrally adjust global configuration for all layers $.bsLayer.setConfig({ fullWidthBreakpoint: 768, // Default is 576, here changed to 768 px animationDuration: 400, // Layer animation now lasts 400 ms icons: { close: 'bi bi-x', maximize: 'bi bi-fullscreen', minimize: 'bi bi-fullscreen-exit', refresh: 'bi bi-arrow-clockwise' } }); // Optional: Overwrite the global onError callback function $.bsLayer.onError = function ($msg) { // Custom error handling alert('Layer error: ' + $msg); }; ``` --- ### Layer Settings [](#layer-settings) Layer settings define the configuration and behavior of **individual layers**. They can be passed when initializing a layer via `$(selector).bsLayer(options)` or set as `data-` attributes on the layer trigger element. These settings control properties such as title, width, styles, AJAX URL, refreshability, closing/maximizing, and all event callbacks. Any setting not explicitly defined will fall back to the global defaults. See the table below for all available settings you can use per layer: OptionTypeDefault / ExampleDescriptionnamestring'layer01'Unique layer name or identifiertitlestring/HTMLundefinedOptional: Layer title (can be string or HTML)widthnumber/stringundefinedOptional: Width in px or as CSS stringbgStyleobject`{ classes: 'text-dark', css: {...} }`Style for background and text color (see below) ↳ classesstring'text-dark'Additional CSS classes for the layer ↳ cssobject`{ background: ..., boxShadow: ..., ... }`Inline CSS styles for the layer backgroundbackdropbool/stringtrueShow backdrop: `true`, `false`, or `'static'`urlstring | Function (Promise)undefinedURL für AJAX-Inhalte **oder** Funktion/Promise für asynchronen Content. Falls eine Funktion verwendet wird, bekommt sie ein `params`-Objekt übergeben (die von `queryParams` zurückgegebenen/erweiterten Parameter). Die Funktion muss ein Promise zurückgeben, welches mit dem gewünschten Content (HTML/String oder Daten) aufgelöst wird.closeablebooltrueShow close (X) button in headerexpandablebooltrueAllow layer to be maximizedqueryParamsfunction`(params) => params`Modify AJAX query parametersonAllfunction`function(eventName, ...args) {}`Callback for all triggered eventsonPostBodyfunction`function($content) {}`After content is loadedonShowfunction`function() {}`Before layer is shownonShownfunction`function() {}`After layer is fully visibleonHidefunction`function() {}`Before layer is hiddenonHiddenfunction`function() {}`After layer is fully hiddenonRefreshfunction`function($content) {}`When the layer is refreshedonCustomEventfunction`function(eventName, ...params) {}`For user-defined custom events**Usage Example:** ``` $('#btnLayerExample').bsLayer({ ajax: { method: 'POST' }, name: 'example-layer', title: 'My Example Layer', width: 600, backdrop: true, url: 'example-content.php', refreshable: true, closeable: true, expandable: false, queryParams: function (params) { params.userId = 123; return params; }, onShown: function ($content) { console.log('Layer wurde angezeigt'); }, onAll: function (eventName, ...args) { console.log('Event:', eventName, args); } }); // You can also supply a function to the `url` option that returns a Promise. This allows you to load dynamic content asynchronously, for example via an API call or any custom logic. // The function can be defined either as an `async` function or as a regular function returning a Promise. The most important point is that the return value is a Promise that resolves with the HTML/string content. $('#btnLayerExample').bsLayer({ name: 'promise-layer', title: 'Async Content Layer', width: 600, backdrop: true, queryParams(params) { // You can dynamically modify or extend parameters here params.id = 1; params.token = 'demo-123'; // Example: add extra parameter return params; }, // `url` as a Promise function: receives params and can use them url: async function(params) { // Example: use params for dynamic content or API call return new Promise(function (resolve, reject) { setTimeout(function () { // You can use params.id, params.token, etc. as needed resolve( ` Async loaded content 🚀 This content was loaded via Promise! Params: ${JSON.stringify(params)} ` ); }, 1000); }); }, refreshable: true, onShown: function ($content) { console.log('Async layer shown'); } }); ``` --- ### Plugin Methods [](#plugin-methods) These instance methods can be called on any jQuery element that has been initialized as a layer trigger: MethodParametersDescription`setTitle``title`Dynamically sets the layer’s title (as string or HTML) for the current trigger.`show``...args`Programmatically opens/displays the layer (simulates a click on the trigger element).`refresh``options = {}`Reloads or refreshes the layer content, e.g. via AJAX, using supplied options if any.`close`noneCloses/hides the layer that belongs to the current trigger element.**Usage Example:** ``` $('#myLayerBtn').bsLayer('setTitle', 'New Title'); $('#myLayerBtn').bsLayer('show'); $('#myLayerBtn').bsLayer('refresh'); $('#myLayerBtn').bsLayer('close'); ``` License ------- [](#license) Proprietary See [composer.json](composer.json) for author information.# bs-layerSlideMenu ### Health Score 30 — LowBetter than 64% of packages Maintenance56 Moderate activity, may be stable Popularity10 Limited adoption so far Community7 Small or concentrated contributor base Maturity41 Maturing project, gaining track record Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~3 days Total 7 Last Release 289d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/6d5f10c16b4b6bd1ac531ffc39c23c569490ec4630829511692c03ec89d36a11?d=identicon)[thomasK81](/maintainers/thomasK81) --- Top Contributors [![ThomasDev-de](https://avatars.githubusercontent.com/u/67106837?v=4)](https://github.com/ThomasDev-de "ThomasDev-de (32 commits)") --- Tags animationbootstrapbootstrap5configeventsjquerylayermodalsettingsjquerylayerbootstrap ### Embed Badge ![Health badge](/badges/webcito-bs-layer/health.svg) ``` [![Health](https://phpackages.com/badges/webcito-bs-layer/health.svg)](https://phpackages.com/packages/webcito-bs-layer) ``` ### Alternatives [kartik-v/bootstrap-popover-x Bootstrap Popover Extended - Popover with modal behavior, styling enhancements and more. 1143.4M3](/packages/kartik-v-bootstrap-popover-x)[kartik-v/yii2-editable An enhanced editable widget for Yii 2.0 that allows easy editing of displayed data with numerous configuration possibilities. 1163.2M59](/packages/kartik-v-yii2-editable)[kartik-v/bootstrap-tabs-x Extended Bootstrap Tabs with ability to align tabs in multiple ways, add borders, rotated titles, and more. 1021.3M1](/packages/kartik-v-bootstrap-tabs-x)[kartik-v/bootstrap-checkbox-x An extended checkbox plugin for bootstrap with three states and additional styles. 921.0M1](/packages/kartik-v-bootstrap-checkbox-x)[kartik-v/yii2-widget-rating A Yii2 widget for the simple yet powerful bootstrap-star-rating plugin with fractional rating support (sub repo split from yii2-widgets) 444.1M8](/packages/kartik-v-yii2-widget-rating)[kartik-v/yii2-widget-timepicker Enhanced Yii2 wrapper for the bootstrap timepicker plugin (sub repo split from yii2-widgets) 404.9M14](/packages/kartik-v-yii2-widget-timepicker) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)