Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

__marcosmaciel__

Erro com o css modal pre-pronto

Por , em Desenvolvimento frontend

Recommended Posts

__marcosmaciel__    0

__marcosmaciel__
Postado

Boa Tarde,

Estou tentando achar o erro aqui mais ta dificil

estou usando o framework do bootstrap

 

e quando chamo o modal por meio de um botao ele chama e tal mais fica com a cor de fundo preto e na hora que clico logico e desaparece

vê se conseguem me ajuda esta o código

 

<!DOCTYPE html>
<html lang="en">
<head>
<title>Admin com PDO</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="../css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="../css/estilos.css" rel="stylesheet" media="screen">
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Segurança</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Usuários<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>
<a href="#">Cadastrar</a>
</li>
</ul>
</li>
</ul>
<p class="pull-right logout">
<strong>Marcos Roberto </strong>
<a href="../painel.php" class="btn btn-danger">Sair</a>
</p>
</div><!-- /.navbar-collapse -->
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-lg-9">
<h2 class="linha">Listagem de Usuários</h2>
<div class="box">
<div class="box-title">Relação</div>
<div class="box-content nopadding">
<table class="table table-striped">
<thead>
<tr>
<th>Nome</th>
<th>E-mail</th>
<th>Acesso</th>
<th>Nível</th>
<th width="200">Opções</th>
</tr>
</thead>
<tbody>
<tr>
<td>SEU NOME</td>
<td>email@email.com</td>
<td>LOGIN</td>
<td>admn</td>
<td>
<a href="#" class="btn btn-warning">Alterar</a>
<a href="#" class="btn btn-danger">Excluir</a>
</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>@jdoe</td>
<td>admn</td>
<td>
<a href="#" class="btn btn-warning">Alterar</a>
<a href="#" class="btn btn-danger">Excluir</a>
</td>
</tr>
<tr>
<td>Matt</td>
<td>Armon</td>
<td>@marmon</td>
<td>admn</td>
<td>
<a href="#" class="btn btn-warning">Alterar</a>
<a href="#" class="btn btn-danger">Excluir</a>
</td>
</tr>
<tr>
<td>Jane</td>
<td>Kowalsky</td>
<td>@jane-kow</td>
<td>admn</td>
<td>
<a href="#" class="btn btn-warning">Alterar</a>
<a href="#" class="btn btn-danger">Excluir</a>
</td>
</tr>
<tr>
<td>Tim</td>
<td>Pacey</td>
<td>@t-pac</td>
<td>admn</td>
<td>
<a href="#" class="btn btn-warning">Alterar</a>
<a href="#" class="btn btn-danger">Excluir</a>
</td>
</tr>
<tr>
<td>Steve</td>
<td>Rovinsky</td>
<td>@steve-sky</td>
<td>admn</td>
<td>
<a href="#" class="btn btn-warning">Alterar</a>
<a href="#" class="btn btn-danger">Excluir</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-lg-3">
<h2 class="linha">Menu</h2>
<div class="bloco">
<ul class="list-group">
<li class="list-group-item">
<span class="badge">14</span>
Total Cadastrados
</li>
</ul>
<div class="list-group">
<a href="#" class="list-group-item active">Administrador</a>
<a href="#" class="list-group-item" data-toggle="modal" data-target="#myModal">Entreagadores</a>
<a href="#" class="list-group-item">Financeiro</a>
<a href="#" class="list-group-item">Balconistas</a>
</div>
</div>
</div>
</div>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/custom.js" type="text/javascript"></script>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

angelorubin    142

angelorubin
Postado

Para remover a overlay da modal coloque isso no css:

.modal-backdrop,
.modal-backdrop.fade.in{
    opacity: 0;
}

Veja um exemplo aqui :

 

http://jsfiddle.net/angelorubin/8ngs40sc/embedded/result

 

http://jsfiddle.net/angelorubin/8ngs40sc

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito