diff --git a/platform/nativescript/plugins/modal-plugin.js b/platform/nativescript/plugins/modal-plugin.js
index b3ad00da..0f18d0a7 100644
--- a/platform/nativescript/plugins/modal-plugin.js
+++ b/platform/nativescript/plugins/modal-plugin.js
@@ -1,4 +1,6 @@
+import { isObject, isDef, isPrimitive } from 'shared/util'
import { updateDevtools } from '../util'
+import { VUE_ELEMENT_REF } from '../renderer/ElementNode'
let sequentialCounter = 0
@@ -18,6 +20,16 @@ function serializeModalOptions(options) {
.join(', ')
}
+function getTargetView(target) {
+ if (isObject(target) && isDef(target.$el)) {
+ return target.$el.nativeView
+ } else if (isDef(target.nativeView)) {
+ return target.nativeView
+ } else if (target[VUE_ELEMENT_REF]) {
+ return target
+ }
+}
+
function _findParentModalEntry(vm) {
if (!vm) {
return false
@@ -65,14 +77,20 @@ export default {
}
// build options object with defaults
- options = Object.assign({}, options, {
- context: null,
- closeCallback: closeCb
- })
+ options = Object.assign(
+ {
+ target: this.$root
+ },
+ options,
+ {
+ context: null,
+ closeCallback: closeCb
+ }
+ )
const navEntryInstance = new Vue({
name: 'ModalEntry',
- parent: this.$root,
+ parent: options.target,
methods: {
closeCb
},
@@ -85,7 +103,7 @@ export default {
const modalPage = navEntryInstance.$mount().$el.nativeView
updateDevtools()
- this.$root.nativeView.showModal(modalPage, options)
+ getTargetView(options.target).showModal(modalPage, options)
})
}
}
diff --git a/samples/app/modals-on-top-of-modals.js b/samples/app/modals-on-top-of-modals.js
new file mode 100644
index 00000000..a87d31ab
--- /dev/null
+++ b/samples/app/modals-on-top-of-modals.js
@@ -0,0 +1,87 @@
+const Vue = require('nativescript-vue')
+// const VueDevtools = require('nativescript-vue-devtools')
+
+// Vue.use(VueDevtools)
+
+Vue.config.debug = true
+Vue.config.silent = false
+
+const SecondaryModal = {
+ name: 'SecondaryModalComponent',
+ template: `
+
+
+
+
+
+
+
+
+
+ `
+}
+
+const ModalComponent = {
+ props: ['foo'],
+ name: 'ModalComponent',
+ template: `
+
+
+
+
+
+
+
+
+
+ `,
+
+ methods: {
+ openModal() {
+ this.$showModal(SecondaryModal, { target: this })
+ }
+ }
+}
+new Vue({
+ data() {
+ return {
+ modalResult: 'No result yet.',
+ animated: true,
+ fullscreen: false,
+ stretched: false
+ }
+ },
+ template: `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ `,
+ methods: {
+ openModal() {
+ this.$showModal(ModalComponent, {
+ props: { foo: 'bar' },
+ animated: this.animated,
+ fullscreen: this.fullscreen,
+ stretched: this.stretched
+ })
+ }
+ }
+}).$start()