Skip to main content
adicionou 193 caracteres ao conteúdo
Fonte Link

Usei esse modal de exemplo.. Mas use oque achar melhor, vamos la, primeiro coloque um id dentro do elemento que você irá inserir no caso adicionei o id "aqui". Explicando... O innerHTML serve para adicionar textos e html dentro de um elemento HTML com isso só peguei o id e adicionei a sua estrutura montada, mais sobre o innerHTML aqui  , De um id para o modal e use a função show, Vale lembrar que o jquery tem que estar importado e o bootstrap também

https://www.w3schools.com/jsref/prop_html_innerhtml.asp

<div class="modal" id="mymodal" tabindex="-1" role="dialog">role="dialog"><!--Coloquei um ID-->
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div id="aqui" class="modal-body"><!-- AQUI O ID -->
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary">Save changes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
  var locais = "";
  var texto1 = "";
  var texto2 = "";
  var texto3 = "";
  var texto4 = "";
  var texto5 = "";
  var texto6 = "";
  var texto_final = "";
  var dados_cidades = "";

  function executando(){
    var obj, dbParam, xmlhttp, myObj, x, txt = "";

    obj = { "table":"customers", "limit":20 };
    dbParam = JSON.stringify(obj);
    xmlhttp = new XMLHttpRequest();

    xmlhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        myObj = JSON.parse(this.responseText);
        txt += "<table border='1'>"
        for (x in myObj) {
          if(myObj[x].estadoSigla==estadoClicked){  
            if(myObj[x].existe=='true'){
              locais +="<strong>" + myObj[x].estado + "</strong>" + "<br/>" + myObj[x].cidade + "<br/>";
            }
          } 
        }
        txt += "</table>"        

        //dados_cidades RECEBE O CONTEUDO REALIZADO APARTIR DA PESQUISA NO ARQUIVO JSON:
        var dados_cidades = document.getElementById("demo").innerHTML = locais;

        //GERANDO O TEXTO QUE SERÁ EXIBIDO POSTERIORMENTE:
        var texto1 = "<h2>Olá!</h2>";
        var texto2 = "<h4>Obrigado por consultar a Next.</h4>";
        var texto3 = "<h4>Atualmente, já existem unidades neste Estado.</h4>";
        var texto4 = "<h4>Mas fique <strong>tranquilo!</strong></h4>";
        var texto5 = "<h4>Na next, seu espaço está RESERVADO!</h4>";
        var texto6 = "<h4>Envie-nos seu email e entraremos em contato:</h4>";
        var texto_final = texto1 + texto2 + texto3 + "<h2>" + dados_cidades + "</h2><br/>" + texto4 + texto5 + texto6;

        //EXIBINDO O RESULTADO APARTIR DE UM ALERTA:
        //bootbox.alert(texto_final);

        //AQUI O innerHTML NO DETERMINADO ID
        document.getElementById('aqui').innerHTML = texto_final;
        $('#mymodal').modal('show');
      }
    };
    xmlhttp.open("POST", "json_estados.php", true);
    xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xmlhttp.send("x=" + dbParam);
  }
</script>

Usei esse modal de exemplo.. Mas use oque achar melhor, vamos la, primeiro coloque um id dentro do elemento que você irá inserir no caso adicionei o id "aqui". Explicando... O innerHTML serve para adicionar textos e html dentro de um elemento HTML com isso só peguei o id e adicionei a sua estrutura montada, mais sobre o innerHTML aqui  https://www.w3schools.com/jsref/prop_html_innerhtml.asp

<div class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div id="aqui" class="modal-body"><!-- AQUI O ID -->
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary">Save changes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
  var locais = "";
  var texto1 = "";
  var texto2 = "";
  var texto3 = "";
  var texto4 = "";
  var texto5 = "";
  var texto6 = "";
  var texto_final = "";
  var dados_cidades = "";

  function executando(){
    var obj, dbParam, xmlhttp, myObj, x, txt = "";

    obj = { "table":"customers", "limit":20 };
    dbParam = JSON.stringify(obj);
    xmlhttp = new XMLHttpRequest();

    xmlhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        myObj = JSON.parse(this.responseText);
        txt += "<table border='1'>"
        for (x in myObj) {
          if(myObj[x].estadoSigla==estadoClicked){  
            if(myObj[x].existe=='true'){
              locais +="<strong>" + myObj[x].estado + "</strong>" + "<br/>" + myObj[x].cidade + "<br/>";
            }
          } 
        }
        txt += "</table>"        

        //dados_cidades RECEBE O CONTEUDO REALIZADO APARTIR DA PESQUISA NO ARQUIVO JSON:
        var dados_cidades = document.getElementById("demo").innerHTML = locais;

        //GERANDO O TEXTO QUE SERÁ EXIBIDO POSTERIORMENTE:
        var texto1 = "<h2>Olá!</h2>";
        var texto2 = "<h4>Obrigado por consultar a Next.</h4>";
        var texto3 = "<h4>Atualmente, já existem unidades neste Estado.</h4>";
        var texto4 = "<h4>Mas fique <strong>tranquilo!</strong></h4>";
        var texto5 = "<h4>Na next, seu espaço está RESERVADO!</h4>";
        var texto6 = "<h4>Envie-nos seu email e entraremos em contato:</h4>";
        var texto_final = texto1 + texto2 + texto3 + "<h2>" + dados_cidades + "</h2><br/>" + texto4 + texto5 + texto6;

        //EXIBINDO O RESULTADO APARTIR DE UM ALERTA:
        //bootbox.alert(texto_final);

        //AQUI O innerHTML NO DETERMINADO ID
        document.getElementById('aqui').innerHTML = texto_final;

      }
    };
    xmlhttp.open("POST", "json_estados.php", true);
    xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xmlhttp.send("x=" + dbParam);
  }
</script>

Usei esse modal de exemplo.. Mas use oque achar melhor, vamos la, primeiro coloque um id dentro do elemento que você irá inserir no caso adicionei o id "aqui". Explicando... O innerHTML serve para adicionar textos e html dentro de um elemento HTML com isso só peguei o id e adicionei a sua estrutura montada, mais sobre o innerHTML aqui, De um id para o modal e use a função show, Vale lembrar que o jquery tem que estar importado e o bootstrap também

https://www.w3schools.com/jsref/prop_html_innerhtml.asp

<div class="modal" id="mymodal" tabindex="-1" role="dialog"><!--Coloquei um ID-->
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div id="aqui" class="modal-body"><!-- AQUI O ID -->
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary">Save changes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
  var locais = "";
  var texto1 = "";
  var texto2 = "";
  var texto3 = "";
  var texto4 = "";
  var texto5 = "";
  var texto6 = "";
  var texto_final = "";
  var dados_cidades = "";

  function executando(){
    var obj, dbParam, xmlhttp, myObj, x, txt = "";

    obj = { "table":"customers", "limit":20 };
    dbParam = JSON.stringify(obj);
    xmlhttp = new XMLHttpRequest();

    xmlhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        myObj = JSON.parse(this.responseText);
        txt += "<table border='1'>"
        for (x in myObj) {
          if(myObj[x].estadoSigla==estadoClicked){  
            if(myObj[x].existe=='true'){
              locais +="<strong>" + myObj[x].estado + "</strong>" + "<br/>" + myObj[x].cidade + "<br/>";
            }
          } 
        }
        txt += "</table>"        

        //dados_cidades RECEBE O CONTEUDO REALIZADO APARTIR DA PESQUISA NO ARQUIVO JSON:
        var dados_cidades = document.getElementById("demo").innerHTML = locais;

        //GERANDO O TEXTO QUE SERÁ EXIBIDO POSTERIORMENTE:
        var texto1 = "<h2>Olá!</h2>";
        var texto2 = "<h4>Obrigado por consultar a Next.</h4>";
        var texto3 = "<h4>Atualmente, já existem unidades neste Estado.</h4>";
        var texto4 = "<h4>Mas fique <strong>tranquilo!</strong></h4>";
        var texto5 = "<h4>Na next, seu espaço está RESERVADO!</h4>";
        var texto6 = "<h4>Envie-nos seu email e entraremos em contato:</h4>";
        var texto_final = texto1 + texto2 + texto3 + "<h2>" + dados_cidades + "</h2><br/>" + texto4 + texto5 + texto6;

        //EXIBINDO O RESULTADO APARTIR DE UM ALERTA:
        //bootbox.alert(texto_final);

        //AQUI O innerHTML NO DETERMINADO ID
        document.getElementById('aqui').innerHTML = texto_final;
        $('#mymodal').modal('show');
      }
    };
    xmlhttp.open("POST", "json_estados.php", true);
    xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xmlhttp.send("x=" + dbParam);
  }
</script>
Fonte Link

Usei esse modal de exemplo.. Mas use oque achar melhor, vamos la, primeiro coloque um id dentro do elemento que você irá inserir no caso adicionei o id "aqui". Explicando... O innerHTML serve para adicionar textos e html dentro de um elemento HTML com isso só peguei o id e adicionei a sua estrutura montada, mais sobre o innerHTML aqui https://www.w3schools.com/jsref/prop_html_innerhtml.asp

<div class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div id="aqui" class="modal-body"><!-- AQUI O ID -->
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary">Save changes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

No seu js faça um innerHTML

<script type="text/javascript">
  var locais = "";
  var texto1 = "";
  var texto2 = "";
  var texto3 = "";
  var texto4 = "";
  var texto5 = "";
  var texto6 = "";
  var texto_final = "";
  var dados_cidades = "";

  function executando(){
    var obj, dbParam, xmlhttp, myObj, x, txt = "";

    obj = { "table":"customers", "limit":20 };
    dbParam = JSON.stringify(obj);
    xmlhttp = new XMLHttpRequest();

    xmlhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        myObj = JSON.parse(this.responseText);
        txt += "<table border='1'>"
        for (x in myObj) {
          if(myObj[x].estadoSigla==estadoClicked){  
            if(myObj[x].existe=='true'){
              locais +="<strong>" + myObj[x].estado + "</strong>" + "<br/>" + myObj[x].cidade + "<br/>";
            }
          } 
        }
        txt += "</table>"        

        //dados_cidades RECEBE O CONTEUDO REALIZADO APARTIR DA PESQUISA NO ARQUIVO JSON:
        var dados_cidades = document.getElementById("demo").innerHTML = locais;

        //GERANDO O TEXTO QUE SERÁ EXIBIDO POSTERIORMENTE:
        var texto1 = "<h2>Olá!</h2>";
        var texto2 = "<h4>Obrigado por consultar a Next.</h4>";
        var texto3 = "<h4>Atualmente, já existem unidades neste Estado.</h4>";
        var texto4 = "<h4>Mas fique <strong>tranquilo!</strong></h4>";
        var texto5 = "<h4>Na next, seu espaço está RESERVADO!</h4>";
        var texto6 = "<h4>Envie-nos seu email e entraremos em contato:</h4>";
        var texto_final = texto1 + texto2 + texto3 + "<h2>" + dados_cidades + "</h2><br/>" + texto4 + texto5 + texto6;

        //EXIBINDO O RESULTADO APARTIR DE UM ALERTA:
        //bootbox.alert(texto_final);

        //AQUI O innerHTML NO DETERMINADO ID
        document.getElementById('aqui').innerHTML = texto_final;

      }
    };
    xmlhttp.open("POST", "json_estados.php", true);
    xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xmlhttp.send("x=" + dbParam);
  }
</script>