Tabs in modal bootstrap

Asked

Viewed 306 times

0

I have a modal in bootstrap and would like to put tabs in this code, however, there is something wrong and the window shown is without the desired shape.

Follows the code:

<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>

java jquery twitter-bootstrap

1 answer

1


Guy your HTML has tag <form> without being closed, at least 3 <div> without closing tb, and a tag <p> in the middle of "nothing". There is no way to succeed...

inserir a descrição da imagem aqui

Look there corrected as it gets

<!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

    I really didn’t pay attention to it. Thank you so much for your help.

Browser other questions tagged java jquery twitter-bootstrap

You are not signed in. Login or sign up in order to post.