problemas em criar um janela modal?

[gedmilson 5]

Estou tentando criar um janela modal mas quando manda atualizar sempre aparece uma figura na frente estou mandando codigo em html e css para que possam me dar uma ajuda valeu!

 

html

 

 

<div id="conteudo">

<div id="banner_principal">

<span id="paginator"></span>

<div id="imagens_slide">

<ul>

<?php

$pegarbaner = BD::conn()->prepare("SELECT * FROM enquete ORDER BY total DESC LIMIT 4");

$pegarbaner->execute();

while($fetch = $pegarbaner->fetchObject()){;

$resp = BD::conn()->prepare("SELECT id_usuario,foto,nome FROM usuarios WHERE id_usuario = '".$fetch->id."'");

$resp->execute();

$resposta = $resp->fetchObject();

$valor = $fetch->total;

if($valor > $valor1){

$titulo = "Primeiro";

$lugar = "os";

$valor1 = $valor;

}elseif($valor1 > $valor2){

$titulo = "Segundo";

$lugar = "um dos quatro";

$valor2 = $valor1;

}elseif($valor2 > $valor3){

$titulo = "Terceiro";

$valor3 = $valor2;

}elseif($valor3 > $valor4){

$titulo = "Quarto";

}

?>

<li>

<img title="Logomrca" src="logomarcas/<?php echo $resposta->foto;?>" border="0" alt="" width="514" height="400"/>

<div class="descricao">

<div id="modal">

<span><?php echo $titulo;?> lugar na somatoria de todos os requisitos</span>

<p>Parabéns galera da <?php echo $resposta->nome;?> vocês foram <?php echo $lugar;?> mais votado pelos clientes na somatória dos requitos</p>

<?php }?>

</div>

</li>

</ul>

</div><!--Imagens Slide-->

</div><!--modal--> <div id="comentarios">

<div id="outros-destaques">

<?php $col = BD::conn()->prepare("SELECT * FROM enquete ORDER BY total DESC LIMIT 4");

$col->execute();

while($festa = $col->fetchObject()){;

$teste = BD::conn()->prepare("SELECT id_usuario,foto FROM usuarios WHERE id_usuario = '".$festa->id."'");

$teste->execute();

$mod = $teste->fetchObject();

$v = $festa->total;

if($v > $v1){

$tit = "1º";

$v1 = $v;

}elseif($v1 > $v2){

$tit = "2ª";

$v2 = $v1;

}elseif($v2 > $v3){

$tit = "3º";

$v3 = $v2;

}elseif($v3 > $v4){

$tit = "4ª";

}?>

<div class="outro-destaque">

<a href="#">

<img title="Posts" src="logomarcas/<?php echo $mod->foto;?>" width="110" height="80"/>

<span><?php echo $tit;?> lugar na soma dos votos</span>

<p1>com um total de:</p1>

<p2><?php echo $festa->total;?> votos</p2>

</a>

</div><!--outro-destaque-->

<?php }?>

</div><!--Outros Destaques-->

</div><!--comentarios-->

</div><!--banner_principal-->

<div id="bloco-dois">

<div id="tabnav">

<ul id="tab-nav">

<li><a title="Comentários" href="#cmt-home">Comentários</a></li>

<li><a title="Mais Vistos" href="#mais-vistos">Mais Vistos</a></li>

</ul>

</div><!--Div tab nav-->

<div id="video-demostrativo">

<h2><img title="Video Demostrativo"src="images/video.png" border="0" alt="">Video demostrativo</h2>

<div class="video">

</div>

</div><!--video-demostrativo-->

</div><!--Bloco Dois-->

</div><!--conteudo-->

css

#modal{

background: rgba(0,0,0, 0.6);

width: 100%;

height: 100%;

position: absolute;

left: 0;

top: 0;

}

#outros-destaques .outro-destaque{

float: left;

margin: 3px;

width: 328px;

height: 86px;

background: #fff;

border-bottom: 1px dotted #333;

padding-top: 2px;

padding-right: 2px;

padding-left: 2px;

padding-bottom: 4px;

}

#outros-destaques .outro-destaque:las-child{

border: 0;

}

.outro-destaque a{

text-decoration: none;

margin-left: 10px;

}

.outro-destaque p1{

position: absolute;

font: 20px Georgia, "Times New Roman", Times, serif;

color: #333;

;

margin-top: 20px;

}

.outro-destaque p2{

position: absolute;

font: 40px Georgia, "Times New Roman", Times, serif;

color: #06f;

;

margin-top: 30px;

}

.outro-destaque img{

float: left;

background: #fff;

padding: 2px;

border: 1px solid #999;

}

.outro-destaque span{

font: 16px Georgia, "Times New Roman", Times, serif;

color: #999;

}

/*Bloco dois/twitter facebook e videos institucionais*/

#bloco-dois{

float: left;

width: 959px;

padding: 5px 0;

border: 2px solid#ccc;

border-left: 0;

border-right: 0;

margin-top: 4px;

}

#tabnav{

float: left;

width: 490px;

background: #fff;

margin-right: 10px;

border: 1px solid #ccc;

height: 300px;

position: relative;

margin-top: 25px;

}

#tabnav ul#tab-nav{

position: absolute;

top: -25px;

list-style: none;

width: 100%;

left: -1px;

}

#tabnav ul#tab-nav li{

float: left;

}

#tabnav ul#tab-nav li a{

text-decoration: none;

font: 14px Tahoma, Geneva, sans-serif;

color: #333;

padding: 5px;

border: 1px solid #ccc;

margin-right: 2px;

}

#tabnav ul#tab-nav li a:hover{

background: #069;

border-color: #069;

color: #fff;

}

#bloco-dois #video-demostrativo{

float: left;

width: 450px;

background: #fff;

height: 325px;

margin-right: 5px;

border: 1px solid #666;

}

#video-demostrativo h2{

font: 16px "Trebuchet MS", Arial, Helvetica,sans-serif;

color: #666;

font-weight: bold;

text-align: left;

float: left;

padding: 4px;

padding-left: 50px;

margin: 3px;

width: 320px;

position: relative;

}

#video-demostrativo h2 img{

position: absolute;

left: -9px;

top: -12px;

}

#video-demostrativo .video{

float: left;

background: #333;

width: 442px;

height: 280px;

margin-left: 4px;

margin-bottom: 4px;

margin-top: 4px;

}

#footer{

height:80px;

background: #06c;

border-top: 2px solid #333;

margin-top: 10px;

}

#footer #footer-center{

width: 1000px;

height: 80px;

margin: 0 auto;

}

#footer #footer-center .top{

height: 35px;

padding: 4px;

width: 953px;

margin: 4px;

border-bottom: 1px dotted #fff;

}

.top a{

text-decoration: none;

float: left;

margin-top: 5px;

font: 13px Tahoma, Geneva, sans-serif;

color: #fff;

margin-right: 10px;

}

.top a#site{float: right; font-weight: bold;}

.top a:hover{color: #333;}

#footer span{

float: left;

margin: 4px;

font: 13px Tahoma, Geneva, sans-serif;

color: #fff;

}

#footer img{

float: right;

margin: 4px;

border: 0;

background: #ccc;

}

/******************************************************************************************

single do site

*******************************************************************************************/

#sidebar{

float: left;

margin-top: 1px;

margin-left: 4px;

width: 951px;

background: #ccc;

}

#sidebar .dados-autor{

float: left;

width: 270px;

height: 200px;

background: #ccc;

}

 

[gedmilson 5]

Tentei fazer assim

 

mas tem uma imagem que continua ficando na frente da tala.

 

 

<?php include "pages/home.php";?>

<div id="modal">

</div><!--modal-->

<?php if(isset($_POST['acao']) && $_POST['acao'] == 'cadStatus'){

$categoria = strip_tags(filter_input(INPUT_POST,'categoria'));

if($categoria == ''){echo'<script>alert("Selecione como deseja se cadastrar")</script>';

}else{?>

<script type="text/javascript">

$(document).ready(function(e) {

$('#modal').fadeOut(500);

});

</script>

<?php }}?>

<div class="modal-box">

<fieldset>

<form action="" method="post" enctype="multipart/form-date">

<div class="fix">

</p>

</label>

<span>Como gostaria de ser cadastrado?</span>

<select name="categoria">

<option value=""></option>

<option value="1">Autonomo</option>

<option value="2">Cliente</option>

<option value="3">Empresário</option>

</select>

<input type="hidden" name="vai" value="cadStatus" />

<input type="submit" value="Cadastrar Status" class="btn-modal"/>

</form>

</div>

</fieldset>

</div><!--modal-box-->

[leonardo de andrade baessa 16]

Vai aparecer sempre amigo pos você a chamou..

 <div id="video-demostrativo">
                      <h2><img title="Video Demostrativo"src="images/video.png" border="0" alt="">Video demostrativo</h2>
                      <div class="video">                         
                      </div>
                  </div> 

[gedmilson 5]

Não era o vídeo demostrativo que aparecia e sim a imagem que fiz para divulgar as lojas. Mas já consegui resolver esse problema.

O problema era a função do java script de repetição sempre fazia com que a imagem ficasse à frente da tela, da

janela modal. Então tive a ideia de desativar a função de repetição sempre que a janela modal fosse chamada e isso resolveu meu problema;

 

De qualquer forma agradeço o seu interesse pelo meu problema e ficarei sempre de olho no fórum para que que possa ajudar quando poder. E ser ajudado quando precisar; conto com todos os feras desse fórum para isso.

 

E de já agradeço à todos.