index/modal

<?php

//conexao com o banco de dados
include '../conexao.php';

// inicia as sessões
session_start();

//verifica se a sessão esta preenchida
if (!isset($_SESSION['logado'])) {
  header('Location: login.php');
}

// guardando o valor do id vindo session em uma variavel
$id = $_SESSION['id_membro'];

// selecionando o membro pelo id
$sql = "SELECT * FROM membros WHERE id = '$id'";
$envio = mysqli_query($conecta, $sql);

$dados = mysqli_fetch_array($envio);

$nome = $dados['nome'];
$email = $dados['email'];
$telefone = $dados['telefone'];
$categoria = $dados['categoria'];
$estado_civil = $dados['estado_civil'];
$nascimento = $dados['data_nascimento'];
$endereco = $dados['endereco'];
$cidade = $dados['cidade'];
$estado = $dados['estado'];
$cep = $dados['cep'];
$facebook = $dados['facebook'];
$instagram = $dados['instagram'];
$whatsapp = $dados['whatsapp'];
$sobre = $dados['sobre'];


?>


<!DOCTYPE html>
<html lang="pt-br">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="Start your development with a Dashboard for Bootstrap 4.">
  <meta name="author" content="Creative Tim">
  <title>L_M Studio - Painel de Controle</title>
  <!-- Favicon -->
  <link rel="icon" href="../assets/img/brand/favicon.png" type="image/png">
  <!-- Fonts -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700">
  <!-- Icons -->
  <link rel="stylesheet" href="../assets/vendor/nucleo/css/nucleo.css" type="text/css">
  <link rel="stylesheet" href="../assets/vendor/@fortawesome/fontawesome-free/css/all.min.css" type="text/css">
  <!-- Argon CSS -->
  <link rel="stylesheet" href="../assets/css/argon.css?v=1.2.0" type="text/css">
</head>

<body>

                  <!-- Address -->
                  <h6 class="heading-small text-muted mb-4">Suas Habilidades</h6>
                  <div class="pl-lg-4">
                    <div class="row">
                      <div class="col-md-12">
                        <div>
                          <div class="row pb-3">
                            <div class="col-md-12 col-sm-12">
                              <div class="row">

                                <div class="col-md-10">
                                  <label class="form-control-label" for="inputhabilidade" style="font-size: 20px;">Habilidade</label>
                                </div>
                                <div class="col-md-2">
                                  <button type="button" class="btn btn-success" data-toggle="modal" data-target="#staticBackdrop">NOVA</button>
                                </div>

                              </div>

                            </div>
                          </div>
                          <div class="row">
                            <div class="col-md-12">

                              <table class="table">
                                <thead>
                                  <tr>
                                    <th scope="col">Habilidade</th>
                                    <th scope="col">Nivel</th>
                                    <th scope="col">Opções</th>
                                  </tr>
                                </thead>
                                <tbody>
                                  <tr>
                                    <th scope="row">Photoshop</th>
                                    <td>Basico</td>
                                    <td>
                                      <div>
                                        <button type="button" class="btn btn-danger" style="padding: 3px 5px;"><i class="fas fa-trash-alt"></i></button>
                                        <button type="button" class="btn btn-primary" style="padding: 3px 5px;"><i class="fas fa-edit"></i></button>
                                      </div>
                                    </td>
                                  </tr>
                                </tbody>
                              </table>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>


                  <hr class="my-4" />


  <!-- janela modal de habilidades -->
  <div class="modal fade" id="staticBackdrop" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="staticBackdropLabel">Nova Habilidade</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body" align="left">
          <form id="formulario_habilidade">
           <div class="form-group">
            <label for="exampleInputEmail1">Nome</label>
            <input type="text" name="nome_habilidade" class="form-control" id="exampleInputEmail1">
          </div>
          <div class="form-group">
            <label for="exampleFormControlFile1">Nivel</label>
            <select name="nivel" name="nivel_habilidade" class="form-control">
              <option selected>Defina o Nivel...</option>
              <option>Básico</option>
              <option>Intérmediario</option>}
              <option>Avançado</option>}
            </select>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
            <button type="button" class="btn btn-primary" id="salvar" name="salvar" value="Salvar">Envia</button>

          </div>
        </form>
        <div id="resposta">

        </div>

      </div>


      <!-- final da janela modal de habilidades-->


      <!-- Argon Scripts -->
      <!-- Core -->
      <script src="../assets/vendor/jquery/dist/jquery.min.js"></script>
      <script src="../assets/vendor/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
      <script src="../assets/vendor/js-cookie/js.cookie.js"></script>
      <script src="../assets/vendor/jquery.scrollbar/jquery.scrollbar.min.js"></script>
      <script src="../assets/vendor/jquery-scroll-lock/dist/jquery-scrollLock.min.js"></script>
      <!-- Argon JS -->
      <script src="../assets/js/argon.js?v=1.2.0"></script>

      <!-- custom JS -->
      <script src="../assets/js/custom.js"></script>
    </body>

    </html>