0

inserir a descrição da imagem aqui

não sei pq quando clico ele não abre chamei tudo certinho e o css está tranquilo ..

@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
}

.page-wrapper {
  width: 100%;
  height: 100%;
  background: url() center no-repeat;
  background-size: cover;
}

.blur-it {
  filter: blur(4px);
}

a.btn {
  width: 200px;
  padding: 18px 0;
  position: absolute;
  top: 50%; 
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  color: #fff;
  border-radius: 0;
  background: #e2525c;
}

.modal-wrapper {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0; 
  left: 0;
  background: rgba(41, 171, 164, 0.8);
  visibility: hidden;
  opacity: 0;
  transition: all 0.25s ease-in-out;
}

.modal-wrapper.open {
  opacity: 1;
  visibility: visible;
}

.modal {
  width: 600px;
  height: 400px;
  display: block;
  margin: 50% 0 0 -300px;
  position: relative;
  top: 50%; 
  left: 50%;
  background: #fff;
  opacity: 0;
  transition: all 0.5s ease-in-out;
}

.modal-wrapper.open .modal {
  margin-top: -200px;
  opacity: 1;
}

.head { 
  width: 90%;
  height: 32px;
  padding: 12px 30px;
  overflow: hidden;
  background: #e2525c;
}

.btn-close {
  font-size: 28px;
  display: block;
  float: right;
  color: #fff;
}

.content {
  padding: 10%;
}

.good-job {
  text-align: center;
  font-family: 'Montserrat', Arial,       Helvetica, sans-serif;
  color: #e2525c;
}
.good-job .fa-thumbs-o-up {
  font-size: 60px;
}
.good-job h1 {
  font-size: 45px;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sem título</title>
	<link rel="stylesheet" type="text/css" href="css/css.css" />
	
	<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
	<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"/>
		<link rel="stylesheet" type="text/css" href="css/normalize.css" />	

</head>

<body>
	
	<!-- Button -->
<div class="page-wrapper">
  <a class="btn trigger" href="#">click me</a>
</div>

<!-- Modal -->
<div class="modal-wrapper">
  <div class="modal">
    <div class="head">
      <a class="btn-close trigger" href="#">
        <i class="fa fa-times" aria-hidden="true"></i>
      </a>
    </div>
    <div class="content">
        <div class="good-job">
          <i class="fa fa-thumbs-o-up" aria-hidden="true"></i>
          <h1>Good Job!</h1>
        </div>
    </div>
  </div>
</div>
	<script>
	$( document ).ready(function() {
  $('.trigger').on('click', function() {
     $('.modal-wrapper').toggleClass('open');
    $('.page-wrapper').toggleClass('blur-it');
     return false;
  });
});
	</script>
	</body>
</html>

4
  • Só faltou incluir o jQuery 2/01/2018 às 20:42
  • <script> $( document ).ready(function() { $('.trigger').on('click', function() { $('.modal-wrapper').toggleClass('open'); $('.page-wrapper').toggleClass('blur-it'); return false; }); }); </script>
    – Felipe
    2/01/2018 às 20:42
  • não seria isso?
    – Felipe
    2/01/2018 às 20:42
  • Não. Adicionei uma resposta explicando o porquê não funciona e como fazer para funcionar. 2/01/2018 às 20:48

1 Resposta 1

2

Para seu código funcionar, você deve adicionar a biblioteca jQuery em sua página html antes do seu primeiro <script>.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Como o $ não é uma função nativa do javascript, mas sim da biblioteca jQuery, o navegador não irá reconhece-lo.

@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
}

.page-wrapper {
  width: 100%;
  height: 100%;
  background: url() center no-repeat;
  background-size: cover;
}

.blur-it {
  filter: blur(4px);
}

a.btn {
  width: 200px;
  padding: 18px 0;
  position: absolute;
  top: 50%; 
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  color: #fff;
  border-radius: 0;
  background: #e2525c;
}

.modal-wrapper {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0; 
  left: 0;
  background: rgba(41, 171, 164, 0.8);
  visibility: hidden;
  opacity: 0;
  transition: all 0.25s ease-in-out;
}

.modal-wrapper.open {
  opacity: 1;
  visibility: visible;
}

.modal {
  width: 600px;
  height: 400px;
  display: block;
  margin: 50% 0 0 -300px;
  position: relative;
  top: 50%; 
  left: 50%;
  background: #fff;
  opacity: 0;
  transition: all 0.5s ease-in-out;
}

.modal-wrapper.open .modal {
  margin-top: -200px;
  opacity: 1;
}

.head { 
  width: 90%;
  height: 32px;
  padding: 12px 30px;
  overflow: hidden;
  background: #e2525c;
}

.btn-close {
  font-size: 28px;
  display: block;
  float: right;
  color: #fff;
}

.content {
  padding: 10%;
}

.good-job {
  text-align: center;
  font-family: 'Montserrat', Arial,       Helvetica, sans-serif;
  color: #e2525c;
}
.good-job .fa-thumbs-o-up {
  font-size: 60px;
}
.good-job h1 {
  font-size: 45px;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sem título</title>
	<link rel="stylesheet" type="text/css" href="css/css.css" />
	
	<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
	<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"/>
		<link rel="stylesheet" type="text/css" href="css/normalize.css" />	

</head>

<body>
	
	<!-- Button -->
<div class="page-wrapper">
  <a class="btn trigger" href="#">click me</a>
</div>

<!-- Modal -->
<div class="modal-wrapper">
  <div class="modal">
    <div class="head">
      <a class="btn-close trigger" href="#">
        <i class="fa fa-times" aria-hidden="true"></i>
      </a>
    </div>
    <div class="content">
        <div class="good-job">
          <i class="fa fa-thumbs-o-up" aria-hidden="true"></i>
          <h1>Good Job!</h1>
        </div>
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<script>
	$( document ).ready(function() {
  $('.trigger').on('click', function() {
     $('.modal-wrapper').toggleClass('open');
    $('.page-wrapper').toggleClass('blur-it');
     return false;
  });
});
	</script>
	</body>
</html>

Aqui no meu exemplo utilizei o jQuery + javascript na parte inferior por questão de performance.

O ideal é deixar os códigos js sempre na parte inferior, dessa forma eles não atrapalharão a performance ao carregar o site. Dica de Leitura

O jQuery 3.1 é a versão mais recente, com melhorias, mas não impede de utilizar uma outra versão.

9
  • Opa mano e se eu criar um arquivo . js e mandar essa script para lá eu posso chamar o jquery lá em cima? E qual a diferneça se eu chamar o jquery 3.1?
    – Felipe
    2/01/2018 às 20:48
  • ou não tem nenhuma diferença caso eu utilize o 3.1 ?
    – Felipe
    2/01/2018 às 20:51
  • 1
    Tem diferenças sim. Editei minha resposta, adicionei alguns detalhes. As diferenças entre a versão 2.2 e 3.1 podem ser vistas no link github.com/jquery/jquery/compare/2.2-stable...3.1.1 2/01/2018 às 20:55
  • cara mt obrigado !
    – Felipe
    2/01/2018 às 20:57
  • 1
    @Felipe, isso acontece pois o bootstrap está sendo chamado depois do seu css. Correto é adicionar o normalize, bootstrap, bootstrap-theme e por fim css.css. Segue o código completo com elementos da ordem "correta". pastebin.com/3Sw4eRky 2/01/2018 às 22:46

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 .