Modal / script does not appear in the box. and

Asked

Viewed 56 times

0

Could someone help me with what’s missing from my right modal? Only css missing 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";
        });
</script>
</body>
</html>
javascript html css

  • can I show you an example of how to create modals using bootstrap?

  • can yes logical brother.

  • But I wanted one this way that the bottom of the site appears.

1 answer

1


An example of functional modal:

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

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

With this modal the bottom of your site will appear

Browser other questions tagged javascript html css

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