bootstrap-show-modal - npm Package Compare versions

Comparing version 1.4.3 to 3.0.0

package.json

 {
   "name": "bootstrap-show-modal",
-  "version": "1.4.3",
+  "version": "3.0.0",
   "description": "jQuery plugin to create bootstrap 4 modals in pure JavaScript",
@@ -30,10 +30,6 @@ "main": "src/bootstrap-show-modal.js",
   "homepage": "https://github.com/shaack/bootstrap-show-modal",
-  "dependencies": {
-    "bootstrap": "^4.5.3",
-    "jquery": "^3.5.1",
-    "popper.js": "^1.16.1"
-  },
+  "dependencies": {},
   "devDependencies": {
-    "prismjs": "^1.23.0"
+    "prismjs": "^1.25.0"
   }
 }

README.md

@@ -7,2 +7,5 @@ # bootstrap-show-modal
 
+> This version is compatible with **Bootstrap 5**, but we remain a Bootstrap 4 compatible version with the branch
+> <a href="https://github.com/shaack/bootstrap-show-modal/tree/bootstrap4-compatible">bootstrap4-compatible</a>.
+> npm package versions 3.x are Bootstrap 5 compatible, versions 1.x Bootstrap 4 compatible.
 
@@ -9,0 +12,0 @@ ## Installation

src/bootstrap-show-modal.js

@@ -52,4 +52,3 @@ /**
             '<h5 class="modal-title"></h5>' +
-            '<button type="button" class="close" data-dismiss="modal" aria-label="Close">' +
-            '<span aria-hidden="true">&times;</span>' +
+            '<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">' +
             '</button>' +
@@ -79,8 +78,11 @@ '</div>' +
             if (this.props.options) {
-                $(this.element).modal(this.props.options)
+                var modalInstance = new bootstrap.Modal(this.element, this.props.options)
+                if (modalInstance) { modalInstance.show() }
             } else {
-                $(this.element).modal()
+                var modalInstance = new bootstrap.Modal(this.element)
+                if (modalInstance) { modalInstance.show() }
             }
         } else {
-            $(this.element).modal('show')
+            var modalInstance = bootstrap.Modal.getInstance(this.element)
+            if (modalInstance) { modalInstance.show() }
         }
@@ -108,7 +110,9 @@ if (this.props.title) {
     Modal.prototype.hide = function () {
-        $(this.element).modal('hide')
+        var modalInstance = bootstrap.Modal.getInstance(this.element)
+        if (modalInstance) { modalInstance.hide() }
     }
 
     Modal.prototype.dispose = function () {
-        $(this.element).modal('dispose')
+        var modalInstance = bootstrap.Modal.getInstance(this.element)
+        if (modalInstance) { modalInstance.dispose() }
         document.body.removeChild(this.element)
@@ -127,3 +131,3 @@ if (this.props.onDispose) {
                     var buttonText = props.buttons[key]
-                    footer += '<button type="button" class="btn btn-primary" data-value="' + key + '" data-dismiss="modal">' + buttonText + '</button>'
+                    footer += '<button type="button" class="btn btn-primary" data-value="' + key + '" data-bs-dismiss="modal">' + buttonText + '</button>'
                 }
@@ -143,3 +147,4 @@ props.footer = footer
                     event.preventDefault()
-                    modal.hide()
+                    var modalInstance = bootstrap.Modal.getInstance(modal.element)
+                    if (modalInstance) { modalInstance.hide() }
                     modal.props.onSubmit(event.target.getAttribute("class").indexOf("btn-true") !== -1, modal)
@@ -146,0 +151,0 @@ })

No alert changes

Improved metrics

Total package byte prevSize

21856

increased by5.4%

Dependency count

0

decreased by-100%

Lines of code

159

increased by3.25%

Number of lines in readme file

102

increased by3.03%

Dependency changes

• - Removedbootstrap@^4.5.3

• - Removedjquery@^3.5.1

• - Removedpopper.js@^1.16.1

• - Removedbootstrap@4.6.2(transitive)

• - Removedjquery@3.7.1(transitive)

• - Removedpopper.js@1.16.1(transitive)