#45 extend Option with (optional) "container" parameter which can be …

CHANGELOG.md

@@ -4,6 +4,12 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/) and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
+## [5.1.0] - 2025-06-05
+
+### Added
+
+- Extend Option with (optional) "container" parameter which can be used to specify the container the overlay should be attached to
+
 ## [5.0.4] - 2021-01-17
 
 ### Changed

README.md

@@ -216,6 +216,10 @@ The option object can include the following properties:
 	 * One or more space separated classes to be added to the basicLightbox element.
 	 */
 	className: '',
+	/*
+	 * (optional) dom object the lightbox markup will be appended to, default: document.body
+	 */
+	container: dom-object
 	/*
 	 * Function that gets executed before the lightbox will be shown.
 	 * Returning false will prevent the lightbox from showing.
@@ -238,4 +242,4 @@ $basicLightbox__duration: .4s; // Transition duration
 $basicLightbox__timing: ease; // Transition timing
 
 @import 'src/styles/main';
-```
+```

src/scripts/main.js

@@ -62,11 +62,14 @@ const validateOptions = function(opts = {}) {
 	if (opts.className == null) opts.className = ''
 	if (opts.onShow == null) opts.onShow = () => {}
 	if (opts.onClose == null) opts.onClose = () => {}
+	if (opts.container == null) opts.container = document.body;
+
 
 	if (typeof opts.closable !== 'boolean') throw new Error('Property `closable` must be a boolean')
 	if (typeof opts.className !== 'string') throw new Error('Property `className` must be a string')
 	if (typeof opts.onShow !== 'function') throw new Error('Property `onShow` must be a function')
 	if (typeof opts.onClose !== 'function') throw new Error('Property `onClose` must be a function')
+	if (typeof opts.container !== 'object') throw new Error('Property `conteiner` must be a object')
 
 	return opts
 
@@ -137,11 +140,12 @@ const render = function(content, opts) {
  * Shows a lightbox by appending an element to the DOM.
  * @param {Node} elem
  * @param {Function} next - The callback that gets executed when the lightbox starts to show up.
+ * @param {?Object} opts
  * @returns {Boolean} success
  */
-const show = function(elem, next) {
+const show = function(elem, next, opts) {
 
-	document.body.appendChild(elem)
+	opts.container.appendChild(elem)
 
 	// Wait a while to ensure that the class change triggers the animation
 	setTimeout(() => {
@@ -223,7 +227,7 @@ export const create = function(content, opts) {
 			// Continue with the callback when available
 			if (typeof next === 'function') return next(instance)
 
-		})
+		}, opts)
 
 	}