Jump to content

Recommended Posts

Eu estou criando uma classe que cria modais usando React, eu preciso criar um modal dentro de um modal, para isso, eu quero chamar a mesma função dentro dela mesma. O modal é criado, mas o problema é que ele não abre, abre o modal principal (#modal-1), mas não abre o sub modal (#modal-2), veja como ficou meu código:

index.html

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Modal</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
    <script src="js/modal.js" type="text/babel"></script>
    <link rel="stylesheet" href="css/modal.css">
</head>
<body>

<div align="center">
    <h1>Modal</h1>
</div>

    <button type="button" data-modal="modal-1">Open Modal</button>
    <div id="modal-content"></div>

    <script type="text/babel">
        const contentSub = [
            <h2>Title SubModal 1</h2>,
            <p>SubModal</p>,
            <small>Rodapé submodal 1</small>
        ];
        const idSub = "modal-2";

        const content = [
            <h2>Title 1</h2>,
            <section>
                <button type="button" data-modal="modal-2">Open SubModal</button>
                <Modal id={idSub} content={contentSub}/>
            </section>,
            <small>Rodapé 1</small>
        ];

        const id = "modal-1";
        ReactDOM.render(
            <Modal id={id} content={content}/>,
            document.getElementById('modal-content')
        );
    </script>

</body>
</html>

js/modal.js

class Modal extends React.Component{
    constructor(props) {
        super(props);

        this.id = this.props.id;

        this.backgroudColorHeader = this.props.backgroudColorHeader === undefined ? 'rgba(103, 117, 240, 1)' : this.props.backgroudColorHeader;
        this.textColorHeader = this.props.textColorHeader === undefined ? '#fff' : this.props.textColorHeader;

        this.backgroudColorBody = this.props.backgroudColorBody === undefined ? 'rgba(255, 255, 255, 1)' : this.props.backgroudColorBody;
        this.textColorBody = this.props.textColorBody === undefined ? '#000' : this.props.textColorBody;

        this.backgroudColorFooter = this.props.backgroudColorFooter === undefined ? 'rgba(103, 117, 240, 1)' : this.props.backgroudColorFooter;
        this.textColorFooter = this.props.textColorFooter === undefined ? '#fff' : this.props.textColorFooter;

        this.borderRadius = this.props.borderRadius === undefined ? '8px' : this.props.borderRadius;

        this.content = this.props.content === undefined ? [<h2>header content</h2>, <p>body content</p>, <p>footer content</p>] : this.props.content;
        this.size = this.props.size === undefined ? 3 : this.props.size;
    }

    closeModal = () => {
        $('#'+this.id).removeClass("show");
        $('body').removeClass("overflow-hidden");
    };

    render(){
        $(`[data-modal]`).click( function () {
            var id = $(this).attr("data-modal");
            var el = document.getElementById(id);
            $(el).addClass("show");
            $('body').addClass("overflow-hidden");
        });

        var background,
            text;

        background = this.backgroudColorHeader;
        text = this.textColorHeader;
        const transparencyBackgroundHeader = background.substring(background.length-2,background.length-1) -.1;
        const backgroundColorHeader = `${background.substring(0,background.length-2)}${transparencyBackgroundHeader})`;
        const styleColorHeader = {
            backgroundColor: backgroundColorHeader,
            color: text,
            borderBottom: `1px solid ${background}`
        };

        background = this.backgroudColorBody;
        text = this.textColorBody;
        const styleColorBody = {
            backgroundColor: background,
            color: text
        };

        background = this.backgroudColorFooter;
        text = this.textColorFooter;
        const transparencyBackgroundFooter = background.substring(background.length-2,background.length-1) -.1;
        const backgroundColorFooter = `${background.substring(0,background.length-2)}${transparencyBackgroundFooter})`;
        const styleColorFooter = {
            backgroundColor: backgroundColorFooter,
            color: text,
            borderTop: `1px solid ${background}`
        };

        const styleBorderRadius = {borderRadius: this.borderRadius};

        const eDivision = ['h', 'b', 'f'];
        const eContent = this.content;
        var div = [];
        for (var i=0;i<eContent.length;i++){
            const part = eDivision[i].replace('h', 'header').replace('b', 'body').replace('f', 'footer')+"-modal";
            const closeModal = i === 0 ? <span onClick={this.closeModal} className="close-modal"><i className="material-icons">close</i></span> : "" ;

            var style;
            if (i===0) style = styleColorHeader;
            else if (i===1) style = styleColorBody;
            else style = styleColorFooter;
            div.push(<div key={i+1} className={part} style={style}>
                       {closeModal}
                       {eContent[i]}
                     </div>);
        }

        const eSize = this.size;
        const s = ['s', 'm-s', 'm', 'm-l', 'l'];
        const size = s[eSize-1];

        const classModal = (size !== "s" &&
            size !== "m-s" &&
            size !== "m" &&
            size !== "m-l" &&
            size !== "l") ? 'modal-modal modal-m' : "modal-modal modal-"+size;

        return <div id={this.id} className={classModal}>
                   <div className="overflow-modal">
                       <div className="container-modal" style={styleBorderRadius}>
                           {div}
                       </div>
                   </div>
               </div>;
    }
}

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By gbL078
      Consegui resolver o problema, por favor podem deletar o tópico.
    • By guzulino
      Então... eu preciso inserir uma paulada de dados em um banco de dados de vez em quando, eu até consigo importar de um CSV pro banco, mas eu preciso fazer isso através do php e eu não tenho nem ideia de como fazer isso, procurei por aqui e não achei, se alguém tem alguma resposta ou referência, manda o link que eu vou dar uma olhada. Valeu.
    • By Guss
      A programadora Cafiaspirina Cruz deseja que todos os elementos <h2> de sua página ganhassem a classe "titulo", para que depois a fonte dos <h2> pudesse ser modificada por um CSS,  deixando-os com um destaque específico. Escreva abaixo um código em Javascript para que todos os <h2> da página ganhem a classe "titulo" de uma única vez?
    • By mxclxrx
      l>
          <head>
              <title>Pergunta 1</title>
          </head>
          <body>
              
              <h3>Pergunta 1</h3>
              <form name="resp" action="pergunta2.php" method="POST">
                  O que é nanotecnologia?<br><br>
                      a)<input type="radio" name="resposta" value="a">é a teoria física que obtém sucesso no estudo dos sistemas físicos cujas dimensões são próximas ou abaixo da escala atômica, tais como moléculas, átomos, elétrons, prótons e de outras partículas subatômicas, muito embora também possa descrever fenômenos macroscópicos em diversos casos.<br><br>
                      b)<input type="radio" name="resposta" value="b">é o estudo de manipulação da matéria em escala atômica e molecular e incluí o desenvolvimento de materiais que está associada a diversas áreas como a medicina, eletrônica, ciência da computação, física, química, biologia e engenharia dos materiais entre outras.<br><br>
                      c)<input type="radio" name="resposta" value="a">é a ciência que estuda a composição, estrutura, propriedades da matéria, as mudanças sofridas por ela durante as reações químicas e a sua relação com a energia.<br><br>
                      d)<input type="radio" name="resposta" value="a">baseia-se na lei da conservação das massas, na lei das proporções definidas e na lei das proporções múltiplas. <br><br>
                      e)<input type="radio" name="resposta" value="a">são protozoários caracterizados pela presença de organelos em forma de pêlos ou tentáculos sugadores chamados cílios.<br><br>
                      
                      <br><br>
                      <input type="submit" name="confirmar" value="confirmar">
              </form>
              <?php
                  
                  if(isset($_POST['confirma'])){
                      $resposta= $_POST['resposta'];
                      $certa= $_POST['certa'];
                      $certa= "b";s
                  
                  if($resposta==$certa){
                      echo('<script>window.alert("Parabens! Voce acertou!");window.location="pergunta2.php";</script>');
                  }else{
                      header('location:pergunta1.php');
                  }
                  }
              ?>
              
          </body>
      </html>
    • By andre2654
      Bom dia, peço humildemente a ajuda de vocês,
      Enfim, estou fazendo um exemplo de site, só para teste mesmo, onde terá uma janela principal perguntando em qual site a pessoa quer ir(1 só empresa, porém dois negócios) ai se a pessoa clicar em alguma das melecas, quero que ela abra mostrando o site, ou só uma imagem mesmo

×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.