render() { return ( <Modal show={this.props.modal_delete.show}> <Modal.Header> <Modal.Title> Are you sure you want to delete <span>{this.props.modal_delete.username}</span>? </Modal.Title> </Modal.Header> <Modal.Footer> <Button onClick={this.userDelete}>Yes</Button> <Button onClick={this.modalHide}>No</Button> </Modal.Footer> </Modal> ) }
const CustomModal = props => { const { title, body, handleSave } = props; return ( <div className="static-modal"> <Modal.Dialog> <Modal.Header> <Modal.Title>{title}</Modal.Title> </Modal.Header> <Modal.Body>{body}</Modal.Body> <Modal.Footer> <Button>Close</Button> <Button bsStyle="primary" onClick={handleSave}> Save changes </Button> </Modal.Footer> </Modal.Dialog> </div> ); }
render () { return ( <div> <Modal show={this.state.show} onHide={this.handleClose}> <Modal.Header closeButton> <Modal.Title>{this.state.StepInfo.title}</Modal.Title> </Modal.Header> <Modal.Body> <StepInfoDetails StepInfo={this.state.StepInfo} metadata={this.props.userMetadata} onSubmit={(model) => {this.handleSubmit(model)}} /> </Modal.Body> <Modal.Footer> <Button onClick={this.handleClose}>Close</Button> </Modal.Footer> </Modal> </div> ) }
render() { return ( <div {...this.props}> <Modal show={this.state.showConfig} onHide={this.closeConfig}> <Modal.Header > <Modal.Title >Config</Modal.Title> </Modal.Header> <Modal.Body > Config goes here </Modal.Body> <Modal.Footer > <Button onClick={this.closeConfig}>Cancel</Button> <Button onClick={this._applyConfig}>Confirm</Button> </Modal.Footer> </Modal> <h1 className={styles.text}>{this.state.content}</h1> </div> ) }
render() { if (this.props.user.signedIn) { return ( <NavDropdown title={this.props.user.name} id="user-dropdown"> <MenuItem onClick={this.signout}>Sign out</MenuItem> </NavDropdown> ); } return ( <NavItem onClick={this.showModal}>Sign in <Modal keyboard show={this.state.showing} onHide={this.hideModal} bsSize="sm"> <Modal.Header closeButton> <Modal.Title>Sign in</Modal.Title> </Modal.Header> <Modal.Body> <Button block disabled={this.state.disabled} onClick={this.signin}> <img src="/btn_google_signin_dark_normal_web.png" alt="Sign in" /> </Button> </Modal.Body> <Modal.Footer> <Button bsStyle="link" onClick={this.hideModal}>Cancel</Button> </Modal.Footer> </Modal> </NavItem> ); }
{userNames !==null ? <div>User names: {userNames}</div> : null} </ModalBody> <ModalFooter> <Button onClick={this._closeModalInfo}>Close</Button> </ModalFooter>
render() { return ( <div> <Button bsStyle="primary" onClick={this.open} id="show"> Add </Button> <Modal show={this.state.showModal} onHide={this.close}> <Modal.Header closeButton> <Modal.Title id="modalTitle">Add a Recipe</Modal.Title> </Modal.Header> <Modal.Body> <form> <FieldGroup id="ProductID" type="text" label="ID" placeholder="Enter Product ID"/> <FieldGroup id="ProductName" type="text" label="Name" placeholder="Enter Product Name"/> <FieldGroup id="ProductPrice" type="text" label="Price" placeholder="Enter Product Price"/> </form> </Modal.Body> <Modal.Footer> <Button onClick={this.add} bsStyle="primary" id="addButton">Add</Button> <Button onClick={this.close}>Close</Button> </Modal.Footer> </Modal> </div> ); }
render(){ return( <Modal bsSize='md' show={this.props.show}> <Modal.Header style={{backgroundColor:'#F7F7F7', border:'solid 1px #AFD3D7'}}> <h4>Add Contact</h4> <button className='modal-close' onClick={this.props.hideContactModal}>X</button> </Modal.Header> <Modal.Body> <div className='row'> <div className='col-lg-12'> <ContactFields ref='contact' contacts={this.props.contacts}/> </div> </div> </Modal.Body> <Modal.Footer> <button className='btn btn-error' onClick={()=>this.refs.contact.clear()}>Clear</button> <button className='btn btn-primary' onClick={()=>this.handleAdd()}>Add</button> <button className='btn btn-success' onClick={()=>this.props.hideContactModal()}>Close</button> </Modal.Footer> </Modal>) }
render() { let { showModal, handleModalOnClick } = this.props; let { formErrorMessage, formError, formSuccessMessage, formSubmitting } = this.state; return ( <Modal show={showModal} onHide={handleModalOnClick} bsStyle="primary"> <form onSubmit={this.handleSubmit}> <Modal.Header closeButton> <Modal.Title>Register Your Interest</Modal.Title> </Modal.Header> <Modal.Body> {(formSuccessMessage || formErrorMessage) && <Alert bsStyle={formSuccessMessage ? 'success' : 'danger'}>{formSuccessMessage || formErrorMessage}</Alert>} <h4>Create an account with us to register your interest</h4> <p>By creating an account, you can manage your schedules and arrange to make automatic future payments!</p> {!formSuccessMessage && <RegisterInterestModalForm formError={formError} formSubmitting={formSubmitting} handleChange={this.handleChange}/>} </Modal.Body> {!formSuccessMessage && <Modal.Footer> <ButtonLoader type="submit" bsStyle="danger" loading={formSubmitting}>Submit</ButtonLoader> </Modal.Footer>} </form> </Modal> ); }
render() { return ( <Modal show={this.state.show} onHide={this.close}> <Modal.Header > <Modal.Title >New Component</Modal.Title> </Modal.Header> <Modal.Body > <form > <Input type='text' label='w' ref='w'/> <Input type='text' label='h' ref='h'/> <Input type='text' label='content' ref='content'/> </form> </Modal.Body> <Modal.Footer > <Button onClick={this.close}>Cancel</Button> <Button onClick={this._create}>Confirm</Button> </Modal.Footer> </Modal> ) }
render(){ const close = this.props.handleCancel; const centerStyle = {textAlign: 'center'}; const noStyle = {padding: '5px'}; return ( <div className="modal-container" style={{height: 20}}> <Modal dialogClassName="" show={this.props.show} onHide={close} container={this} aria-labelledby="contained-modal-title" > <Modal.Header closeButton className="text-center modal-header-danger"> <Modal.Title id="contained-modal-title">{translate('general.AUTHORIZATION_OF_FOREMAN')}</Modal.Title> </Modal.Header> <Modal.Body className="text-center"> <h3>{translate('app.swift_card')}</h3> </Modal.Body> <Modal.Footer className="text-center" style={centerStyle}> <Button bsStyle="success" className="btn-huge" style={noStyle} onClick={close}>{translate('general.Cancel')}</Button> </Modal.Footer> </Modal> </div> ); }
renderModal () { return ( <Modal show={this.state.showModal} onHide={this.close.bind(this)}> <Modal.Header closeButton> <Modal.Title>Modal heading</Modal.Title> </Modal.Header> <Modal.Body> <h4>Text in a modal</h4> <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p> <hr /> <h4>Overflowing text to show scroll behavior</h4> <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p> <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p> <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p> </Modal.Body> <Modal.Footer> <Button onClick={this.close.bind(this)}>Close</Button> </Modal.Footer> </Modal> ); }
render() { return ( <div> <Button className='btn btn-newProject' bsStyle="primary" bsSize="large" onClick={this.open}>New Project</Button> <Modal show={this.state.showModal} onHide={this.close}> <Modal.Header closeButton> <Modal.Title>Modal heading</Modal.Title> </Modal.Header> <Modal.Body> <h4>New Project</h4> <hr /> <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p> <p>Praesent sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p> </Modal.Body> <Modal.Footer> <Button onClick={this.close}>Close</Button> </Modal.Footer> </Modal> </div> ); }
render() { let { showModal, handleModalOnClick } = this.props; let { formErrorMessage, formError, formSuccessMessage, formSubmitting } = this.state; return ( <Modal show={showModal} onHide={handleModalOnClick} bsStyle="primary"> <form onSubmit={this.handleSubmit}> <Modal.Header closeButton> <Modal.Title>Login</Modal.Title> </Modal.Header> <Modal.Body> {(formSuccessMessage || formErrorMessage) && <Alert bsStyle={formSuccessMessage ? 'success' : 'danger'}>{formSuccessMessage || formErrorMessage}</Alert>} <h4>Manage Your Account</h4> <p>Access your account, settings and payment details.</p> <LoginModalForm formError={formError} formSubmitting={formSubmitting} handleChange={this.handleChange}/> </Modal.Body> <Modal.Footer> <ButtonLoader type="submit" bsStyle="danger" loading={formSubmitting}>Login</ButtonLoader> </Modal.Footer> </form> </Modal> ); }
render () { return ( <div className='static-modal'> <Modal.Dialog onHide={() => {}}> <Modal.Header> <Modal.Title>Modal title</Modal.Title> </Modal.Header> <Modal.Body> One fine body... </Modal.Body> <Modal.Footer> <Button>Close</Button> <Button bsStyle="primary">Save changes</Button> </Modal.Footer> </Modal.Dialog> </div> ) }