[Home](./index.md) > [@empathyco/x-components](./x-components.md) > [BaseEventsModal](./x-components.baseeventsmodal.md) ## BaseEventsModal variable Component containing a modal that emits a [XEventsTypes.UserClickedCloseEventsModal](./x-components.xeventstypes.userclickedcloseeventsmodal.md) when clicking outside the content rendered in the default slot and can receive, through the eventsToCloseModal prop, a list of [XEvent](./x-components.xevent.md) to listen to in order to close also the modal, eventsToOpenModal prop, another list of [XEvent](./x-components.xevent.md) to customize the events to listen to open the modal and a prop, displayOverlay, to display an overlay over the rest of the html. The default slot offers the possibility to customize the modal content. **Signature:** ```typescript _default: import("vue").DefineComponent; default: () => XEvent[]; }; eventsToCloseModal: { type: PropType; default: () => XEvent[]; }; bodyClickEvent: { type: PropType; default: string; }; animation: (StringConstructor | ObjectConstructor | FunctionConstructor)[]; }>, { isOpen: import("vue").Ref; openerElement: import("vue").Ref; baseModalEl: import("vue").Ref; emitBodyClickEvent: (event: MouseEvent | FocusEvent) => void; }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly; default: () => XEvent[]; }; eventsToCloseModal: { type: PropType; default: () => XEvent[]; }; bodyClickEvent: { type: PropType; default: string; }; animation: (StringConstructor | ObjectConstructor | FunctionConstructor)[]; }>> & Readonly<{}>, { eventsToOpenModal: (keyof import("../../wiring/events.types").XEventsTypes)[]; eventsToCloseModal: (keyof import("../../wiring/events.types").XEventsTypes)[]; bodyClickEvent: keyof import("../../wiring/events.types").XEventsTypes; }, {}, { BaseModal: import("vue").DefineComponent<{}, {}, any>; }, {}, string, import("vue").ComponentProvideOptions, true, {}, any> ```