CODEWITHSUNDEEP
javascriptvue.jsvuejs2
Mohd Ali
Mohd Ali

Reputation: 145

Prevent modal to close when click on the background [Vuejs]

I am using vue-js-modal library and following the same steps in the documentation, but I need to implement that when the modal opened the user cannot close the modal when he clicks on the background behind the modal.

In the documentation written that use property clickToClose, but when I use it inside the modal error message appears for me:

<modal name="image-modal" clickToClose="false"></modal>

Error message:

Vue warn]: Invalid prop: type check failed for prop "clickToClose". Expected Boolean, got String.

What is the solution to this problem?

Upvotes: 3

Views: 14245

Answers (5)

Kai
Kai

Reputation: 849

You can set maskClosable to false to prevent modal close when click mask.

<a-modal :maskClosable="false">

Upvotes: 0

Decade Moon
Decade Moon

Reputation: 34286

clickToClose="false" sets the clickToClose prop to the string "false".

You need to use v-bind to bind to an arbitrary JavaScript expression:

<modal name="image-modal" :clickToClose="false"></modal>

In the above snippet, false is evaluated as JavaScript code instead of a string.

Upvotes: 6

M. Ahmad
M. Ahmad

Reputation: 1

While using vue-js Modal (). There is a property in Modal called backdrop. You should use this

:close-on-backdrop="false" :close-on-esc="false"

In your Modal tag.

Upvotes: -2

Vivek Khurana
Vivek Khurana

Reputation: 231

The kebabCase in clickToClose may not work. This works for me

<modal name="image-modal" v-bind:click-to-close="false"></modal>

Upvotes: 1

Smartniggs
Smartniggs

Reputation: 190

Subsequently for those using bootstrap-vue: add "no-close-on-backdrop" and set it to "true". 

<b-modal id="modal_id" :no-close-on-backdrop="true">

Upvotes: 7

Related Questions