GA-MO / react-confirm-alert

react component confirm dialog.
https://ga-mo.github.io/react-confirm-alert/demo/
MIT License
272 stars 105 forks source link

Close dialog on click outside of the DOM #19

Closed kkesley closed 5 years ago

kkesley commented 5 years ago

Hello, how to close the dialog when the user clicks outside of the DOM?

ferdouswahid commented 5 years ago

Hi, I need close the dialog when clicks outside and also cross button on the dialog to close.

GA-MO commented 5 years ago

This issue was solved in version 2.1.0

ferdouswahid commented 5 years ago

Thanks for the feature. I updated the package from 2.0.7 to 2.1.0 but still not working. I have used "Custom UI Component" in my project as described in the readme. Please update the readme file as well. my code is

   confirmDelete = () => {
        confirmAlert({
            customUI: ({ onClose }) => {
                return (
                    <div style={{backgroundColor:'#ed3f3f', height:'168px', width:'300px', textAlign:'center',
                        color:'#fff', borderRadius:'5px', position:'absolute', top:'416px', left:'496px' }}>
                        <h1 style={{}}>Are you sure?</h1>
                        <p>You want to delete?</p>

                        <button style={{color:'#ed3f3f', border:'0', cursor:'pointer', marginRight:'10px',
                            padding:'4px 13px'}} onClick={onClose}>No</button>
                            {/* This to be taken */}
                        <button style={{color:'#ed3f3f', border:'0', cursor:'pointer', padding:'4px 20px'}}
                                onClick={() => {this.handleClickForDeleteCountry(); onClose()}}>  Yes, I'm Sure.</button>
                    </div>
                )
            }
        })
    };