1.0.4

Edsardio · Apr 15, 2022 · f93173c · f93173c
1 parent 55ec263
commit f93173c
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 7 deletions.
diff --git a/dist/module.cjs.js b/dist/module.cjs.js
@@ -15,7 +15,7 @@ __export(exports, {
 function src_default(Alpine) {
   document.addEventListener("alpine:init", () => {
     let body = document.querySelector("body");
-    body.innerHTML = `<div style="display: none;" x-bind:class="$store.lightbox.show ? '' : 'hidden'" class="fixed z-10 inset-0 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true" x-show="$store.lightbox.show" x-data>
+    body.insertAdjacentHTML("afterbegin", `<div style="display: none;" x-bind:class="$store.lightbox.show ? '' : 'hidden'" class="fixed z-10 inset-0 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true" x-show="$store.lightbox.show" x-data>
                       <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
                           <div x-on:click="$store.lightbox.toggle()" class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true"
                               x-transition:enter="ease-out duration-300"
@@ -46,7 +46,7 @@ function src_default(Alpine) {
                           </div>
                       </div>
                   </div>
-        ` + body.innerHTML;
+        `);
     Alpine.store("lightbox", {
       show: false,
       src: null,

diff --git a/dist/module.esm.js b/dist/module.esm.js
@@ -2,7 +2,7 @@
 function src_default(Alpine) {
   document.addEventListener("alpine:init", () => {
     let body = document.querySelector("body");
-    body.innerHTML = `<div style="display: none;" x-bind:class="$store.lightbox.show ? '' : 'hidden'" class="fixed z-10 inset-0 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true" x-show="$store.lightbox.show" x-data>
+    body.insertAdjacentHTML("afterbegin", `<div style="display: none;" x-bind:class="$store.lightbox.show ? '' : 'hidden'" class="fixed z-10 inset-0 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true" x-show="$store.lightbox.show" x-data>
                       <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
                           <div x-on:click="$store.lightbox.toggle()" class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true"
                               x-transition:enter="ease-out duration-300"
@@ -33,7 +33,7 @@ function src_default(Alpine) {
                           </div>
                       </div>
                   </div>
-        ` + body.innerHTML;
+        `);
     Alpine.store("lightbox", {
       show: false,
       src: null,

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@edsardio/alpine-lightbox",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "A dynamic lightbox using AlpineJS and TailwindCSS",
   "main": "dist/module.cjs.js",
   "module": "dist/module.esm.js",

diff --git a/src/index.js b/src/index.js
@@ -1,7 +1,7 @@
 export default function (Alpine) {
     document.addEventListener('alpine:init', () => {
         let body = document.querySelector('body');
-        body.innerHTML = `<div style="display: none;" x-bind:class="$store.lightbox.show ? '' : 'hidden'" class="fixed z-10 inset-0 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true" x-show="$store.lightbox.show" x-data>
+        body.insertAdjacentHTML('afterbegin', `<div style="display: none;" x-bind:class="$store.lightbox.show ? '' : 'hidden'" class="fixed z-10 inset-0 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true" x-show="$store.lightbox.show" x-data>
                       <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
                           <div x-on:click="$store.lightbox.toggle()" class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true"
                               x-transition:enter="ease-out duration-300"
@@ -32,7 +32,7 @@ export default function (Alpine) {
                           </div>
                       </div>
                   </div>
-        ` + body.innerHTML;
+        `);
 
         Alpine.store('lightbox', {
             show: false,