Disable Modal backdrop in React Rodal

Question

I am using Rodal package for implementing modal feature in one of my projects, now I want to disable the backdrop of the modal on click outside in the background of the modal. how can I achieve that? here is the package https://www.npmjs.com/package/rodal

Answer 1

Update : Starting from Rodal v1.5.1, we can pass a prop closeMaskOnClick to prevent modal from closing. For more information see this .

---

For older versions of Rodal :

When you click on close or ok button, event will be fired and your hide function will be called. Similarly, when you click outside the modal, hide function will also be called, which will set the state variable visible to false and your modal will be hidden.

hide(){
   this.setState({ visible: false });
}

There are two ways to prevent this.

1. There is a prop called showMask in Rodal , You can pass it as false .

Like this,

<Rodal visible={this.state.visible} showMask={false} onClose={this.hide.bind(this)}>
   ....
</Rodal>

But passing it as false will not show mask. So there is also another way.

2. You can slightly modify your hide function to check whether it was called after clicking on the ok or close button or it was called as a result of any click event outside your modal.

You can check:

hide(event){
   if (event.target.className === 'rodal-mask') {
       return;
   }
   this.setState({ visible: false });
}

I've tested both the methods on my machine and it works perfectly. Hope it helps :)

Answer 2

从Rodal 1.5.1版开始，您可以简单地将closeMaskOnClick选项设置为false。