Modal / script does not appear in box. and

0

Can anyone help me what's missing from my modal? Just missing css or missing something in the code?

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>
    
asked by anonymous 28.12.2017 / 12:58

1 answer

1

An example of functional modal:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><!--LatestcompiledandminifiedCSS--><linkrel="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><!--Buttontriggermodal--><buttontype="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>

For css I used the bootstrap because it already contains ready-made classes, but you can use any other class for styles.

  

With this modal the background of your site will appear

    
28.12.2017 / 14:54