0

Pessoal possuo um modal em bootstrap e gostaria de colocar abas nesse código, porém, há algo de errado e a janela mostrada fica sem a forma desejada.

Segue o código:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>


<div class='modal fade' id='Alt1' role='dialog' data-backdrop='false' style=' background: rgba(0,0,0,0.5);'>
<div class='modal-dialog modal-lg'>
<div class='modal-content'>
<div class='modal-header'>
<div class='row'>
<div class='col-sm-5'>
<h4 class='modal-title' style='margin-right: 140px;'><b>Alterar Chamados</b></h4>
</div>
<form method='post' action='func/define.php' enctype='multipart/form-data'>
<div class='col-sm-5 text-right' style='float: right'>
<button type='submit' class='btn btn-danger glyphicon glyphicon-ok'></button>
<button type='button' class='btn btn-primary glyphicon glyphicon-remove' data-dismiss='modal'></button>
</div>
</div>
</div>
<div class='modal-body'>
<p>
<div class="container theme-showcase" role="main">
<div class="page-header">
<h1><?php echo $row_cursos['nome']; ?></h1>
</div>
<div>

<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Conteúdo</a></li>
<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Avaliação</a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">
teste1
</div>
<div role="tabpanel" class="tab-pane" id="profile">
teste2
</div>
</div>

</div>
</div>

1 Resposta 1

1

Cara seu HTML tem tag <form> sem ser fechado, pelo menos umas 3 <div> sem fechar tb, e uma tag <p> no meio do "nada". Ai não tem como dar certo...

inserir a descrição da imagem aqui

Olha ai corrigido como fica

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8" />
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" />
<style>

</style>
</head>

<body>

    <div class="modal fade"  id="Alt1" role="dialog" data-backdrop="false" style=" background: rgba(0,0,0,0.5); opacity: 1; display: block">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <div class="row">
                        <div class="col-sm-5">
                            <h4 class="modal-title" style="margin-right: 140px;"><b>Alterar Chamados</b></h4>
                        </div>
                        <form method="post" action="func/define.php" enctype="multipart/form-data">
                            <div class="col-sm-5 text-right" style="float: right">
                                <button type="submit" class="btn btn-danger glyphicon glyphicon-ok"></button>
                                <button type="button" class="btn btn-primary glyphicon glyphicon-remove" data-dismiss="modal"></button>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="modal-body">

                    <div class="container theme-showcase" role="main">
                        <div class="page-header">
                            <h1><?php echo $row_cursos["nome"]; ?></h1>
                        </div>
                        <div>

                            <!-- Nav tabs -->
                            <ul class="nav nav-tabs" role="tablist">
                                <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Conteúdo</a></li>
                                <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Avaliação</a></li>
                            </ul>

                            <!-- Tab panes -->
                            <div class="tab-content">
                                <div role="tabpanel" class="tab-pane active" id="home">
                                    teste1
                                </div>
                                <div role="tabpanel" class="tab-pane" id="profile">
                                    teste2
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</body>

</html>

1
  • 1
    Realmente eu não me atentei pra isso. Muito obrigado pela ajuda.
    – Carlos
    13/09/2019 às 18:25

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .