0

Alguém poderia me ajudar o que falta pro meu modal da certo? Só falta a css ou falta algo no codigo?

code:

    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sem título</title>
</head>

<body>
<header>
    <div class="company-notice-overlay hide" id="company-notice">
        <div class="company-notice">
            <div class="top-side">
                <div class="left-side">
                    <h3>ATENÇÃO</h3>
                    <p>1212312312412563463463463473473451351.</p>
                </div>
                <div class="right-side">
                    <img src="/images/mascot-2-elomax.jpg" />               </div>
            </div>
            <div class="bottom-side">
                <button class="btn btn-danger i-refuse">SAIR DO SITE</button>
                <button class="btn btn-success i-agree">ESTOU CIENTE E CONCORDO</button>
            </div>
        </div>
    </div>
</header>

<script type="text/javascript">
        /*$(".hot-image-overlay").removeClass("hide");

        $("a.close-hot-image").click(function(e){
            e.preventDefault();
            $(this).parent(".hot-image-overlay").addClass("hide");
        });

        $(".hot-image-overlay").click(function(e){
            e.preventDefault();
            $(".hot-image-overlay").addClass("hide");
        });*/

        if(typeof sessionStorage.serviceAgreed == 'undefined' && !parseInt(sessionStorage.serviceAgreed)){
            $(".company-notice-overlay").removeClass("hide");
        }

        $(".company-notice button.i-agree").click(function(e){
            e.preventDefault();
            sessionStorage.serviceAgreed = 1;
            $(this).parents(".company-notice-overlay").addClass("hide");
        });

        $(".company-notice button.i-refuse").click(function(e){
            e.preventDefault();
            window.location.href = "https://www.google.com.br";
        });
</script>
</body>
</html>
3
  • posso te mostrar um exemplo de como criar modais utilizando bootstrap? Commented 28/12/2017 às 13:05
  • pode sim irmão logico.
    – Felipe
    Commented 28/12/2017 às 13:33
  • Mas eu queria um desse jeito q o fundo do site apareça.
    – Felipe
    Commented 28/12/2017 às 13:34

1 Resposta 1

1

Um exemplo de modal funcional:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    
    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
    
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    
    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
      Exemplo
    </button>
    
    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
          </div>
          <div class="modal-body">
           // Felipe aqui você irá colocar os códigos html que vão preencher o corpo do seu modal
          </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>

Para o css utilizei o bootstrap pois ja contem classes prontas, mas você pode usar qualquer outra classe para stilos.

Com esse modal o fundo do seu site vai aparecer

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 .