From 8ce35402b3f2c54e65206b0141437c07c0475b48 Mon Sep 17 00:00:00 2001
From: cw2k13 <1096486917@qq.com>
Date: Fri, 24 May 2024 10:09:34 +0800
Subject: [PATCH] feat: Custom root render container

---
 src/css/layouts.styl | 11 ++++++++++-
 src/js/iziToast.js   | 12 +++++++++---
 types/index.d.ts     |  5 +++++
 3 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/src/css/layouts.styl b/src/css/layouts.styl
index 7aed6db..552975f 100644
--- a/src/css/layouts.styl
+++ b/src/css/layouts.styl
@@ -21,4 +21,13 @@
  *
 	&.iziToast-layout4
 		margin 20px
-*/
\ No newline at end of file
+*/
+
+.iziToast-custom-container
+	position relative
+	> .iziToast-wrapper
+		position absolute
+	> .iziToast-overlay
+		position absolute
+		top 0
+		bottom 0
\ No newline at end of file
diff --git a/src/js/iziToast.js b/src/js/iziToast.js
index 81eebf6..f5cfe9c 100644
--- a/src/js/iziToast.js
+++ b/src/js/iziToast.js
@@ -83,6 +83,7 @@
 		closeOnClick: false,
 		displayMode: 0,
 		position: 'bottomRight', // bottomRight, bottomLeft, topRight, topLeft, topCenter, bottomCenter, center
+		parent: '',
 		target: '',
 		targetFirst: true,
 		timeout: 5000,
@@ -673,6 +674,11 @@
 			settings = extend(defaults, settings);
 			settings.time = {};
 
+		if (settings.parent instanceof Element) {
+			BODY = settings.parent;
+			BODY.classList.add(PLUGIN_NAME + '-custom-container');
+		}
+
 		if(settings.id === null){
 			settings.id = generateId(settings.title+settings.message+settings.color);
 		}
@@ -702,7 +708,7 @@
 		$iziToast.children[settings.ref] = settings;
 
 		var $DOM = {
-			body: document.querySelector('body'),
+			body: BODY,
 			overlay: document.createElement('div'),
 			toast: document.createElement('div'),
 			toastBody: document.createElement('div'),
@@ -1108,7 +1114,7 @@
 					$DOM.wrapper = document.createElement('div');
 					$DOM.wrapper.classList.add(PLUGIN_NAME + '-wrapper');
 					$DOM.wrapper.classList.add(position);
-					document.body.appendChild($DOM.wrapper);
+					$DOM.body.appendChild($DOM.wrapper);
 				}
 				if(settings.position == 'topLeft' || settings.position == 'topCenter' || settings.position == 'topRight'){
 					$DOM.wrapper.insertBefore($DOM.toastCapsule, $DOM.wrapper.firstChild);
@@ -1147,7 +1153,7 @@
 					if(!isNaN(settings.zindex) && settings.zindex !== null) {
 						$DOM.overlay.style.zIndex = settings.zindex-1;
 					}
-					document.querySelector('body').appendChild($DOM.overlay);
+					$DOM.body.appendChild($DOM.overlay);
 				}
 
 				if(settings.overlayClose) {
diff --git a/types/index.d.ts b/types/index.d.ts
index 9c7e819..872ef0f 100644
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -132,6 +132,11 @@ export interface IziToastSettings {
      * Default value: bottomRight
      */
     position?: IziToastPosition;
+    /**
+     * Custom root render container
+     * Default value: document.body
+     */
+    parent?: Element;
     /**
      * Fixed place where you want to show the toasts.
      */