Category : modal-dialog

Here is how my custom Modal component is defined: function Modal({ open, set_open, children }) { const modal_ref = useRef(null); useEffect(() => { if (open) { modal_ref.current.style.display = "block"; } else { modal_ref.current.style.display = "none"; } }, [open]); return ReactDom.createPortal( <div className="modal-container" ref={modal_ref}> <div className="modal-content">{children}</div> </div>, document.getElementById("root") ); } The children property of the component ..

Read more

my contact form opens as modal export class ContactFormComponent implements OnInit { constructor(public activeModal: NgbActiveModal, private contactService: ContactService) { } close() {this.activeModal.dismiss(‘Cross click’);} } I invoke it from here export class AppComponent implements OnInit { constructor(private modalService: NgbModal) { } ngOnInit() { } openContactForm() { this.modalService.open(ContactFormComponent, { windowClass: ‘contact-modal’, size: ‘xl’ }); } } and ..

Read more

const useStyles = makeStyles((theme) => ({ modal: { display: "flex", alignItems: "center", justifyContent: "center", width: "100%", }, paper: { backgroundColor: theme.palette.background.paper, border: "2px solid #000", boxShadow: theme.shadows[5], padding: theme.spacing(2, 4, 3), }, })); const classes = useStyles(); <Modal className={classes.modal} open={eval(`${page}_modal`)} onClose={() => eval(`set_${page}_modal`)(false)} aria-labelledby="simple-modal-title" aria-describedby="simple-modal-description" closeAfterTransition BackdropComponent={Backdrop} BackdropProps={{ timeout: 500, }} > <Child /> </Modal> ..

Read more

I created a modal in HTML, but when i click button, i can’t close popup display enter image description here code <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-backdrop="true" data-keyboard="false"> Launch demo modal </button> <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> <button type="button" class="close" ..

Read more