INU Login Sign up
Login Or Sign up

Answers for "modal reactjs template"

Javascript
1

modal reactjs template

import React, { Component } from 'react';
import Modal from 'react-awesome-modal';

export default class Examples extends Component {
    constructor(props) {
        super(props);
        this.state = {
            visible : false
        }
    }

    openModal() {
        this.setState({
            visible : true
        });
    }

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

    render() {
        return (
            <section>
                <h1>React-Modal Examples</h1>
                <input type="button" value="Open" onClick={() => this.openModal()} />
                <Modal 
                    visible={this.state.visible}
                    width="400"
                    height="300"
                    effect="fadeInUp"
                    onClickAway={() => this.closeModal()}
                >
                    <div>
                        <h1>Title</h1>
                        <p>Some Contents</p>
                        <a href="javascript:void(0);" onClick={() => this.closeModal()}>Close</a>
                    </div>
                </Modal>
            </section>
        );
    }
}
Posted by: Guest on October-07-2020
0

modal react form table

import React from 'react';
import ReactDOM from 'react-dom';
import Modal from 'react-modal';

const customStyles = {
  content : {
    top                   : '50%',
    left                  : '50%',
    right                 : 'auto',
    bottom                : 'auto',
    marginRight           : '-50%',
    transform             : 'translate(-50%, -50%)'
  }
};

// Make sure to bind modal to your appElement (http://reactcommunity.org/react-modal/accessibility/)
Modal.setAppElement('#yourAppElement')

function App(){
  var subtitle;
  const [modalIsOpen,setIsOpen] = React.useState(false);
  function openModal() {
    setIsOpen(true);
  }

  function afterOpenModal() {
    // references are now sync'd and can be accessed.
    subtitle.style.color = '#f00';
  }

  function closeModal(){
    setIsOpen(false);
  }

    return (
      <div>
        <button onClick={openModal}>Open Modal</button>
        <Modal
          isOpen={modalIsOpen}
          onAfterOpen={afterOpenModal}
          onRequestClose={closeModal}
          style={customStyles}
          contentLabel="Example Modal"
        >

          <h2 ref={_subtitle => (subtitle = _subtitle)}>Hello</h2>
          <button onClick={closeModal}>close</button>
          <div>I am a modal</div>
          <form>
            <input />
            <button>tab navigation</button>
            <button>stays</button>
            <button>inside</button>
            <button>the modal</button>
          </form>
        </Modal>
      </div>
    );
}

ReactDOM.render(<App />, appElement);
Posted by: Guest on August-07-2020

Code answers related to "modal reactjs template"

Code answers related to "Javascript"

Browse Popular Code Answers by Language

Python
Javascript
Whatever
Shell/Bash
CSS
Html
PHP
SQL
Java
C#

Popular Programming Languages

Abap ActionScript Assembly BASIC C C# C++ Clojure Cobol CSS Dart Delphi Elixir Erlang F# Fortran Go Groovy Haskell Html Java Javascript Julia Kotlin Lisp Lua Matlab Objective-C Pascal Perl PHP Prolog Python R Ruby Rust Scala Scheme Shell/Bash SQL Swift TypeScript VBA Whatever

Advertisements

290x500

Company

Compilers

Help

Connect with us

footer logo

Copyright © 2021 Codeinu