1

Estou tentando fazer um pop-up, porém está dando erro fadeIn is not a function at HTMLAnchorElement, pois utilizo esse jquery via cdn por causa do bootstrap:

src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"

A intenção era exibir essa box ao passar com o ponteiro do mouse em cima da imagem, que é o que consigo com esse jquery:

src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"

com esse acima eu consigo realizar o que quero e foi esse que utilizei aqui, inclusive irão perceber alguns nomes de classes do bootstrap Segue o código:

.container {
  width: 50%;
  float: left;
}

.img-call-popup {
  width: 30%; 
  height: 200px; 
  border: 1px solid #fff; 
  display: inline-block; 
  border-radius: 30%;
}

.popup-container {
  width: 100%;
  height: 300px;
}
.popup-box {
  position: absolute;
  margin: 0 33%;
  width: 420px;
  height: 200px;
  background-color: rgb(221, 221, 221);
  padding: 20px 40px;
  z-index: 1000;
  margin: auto;
  top: 0; left: 0; bottom: 0; right: 0;
  display: none;
}
.popup-box div {
  clear: both;
}

.popup-box h3 {
  display: inline;
}

.popup-box nav.close {
  float: right;
  font-size: 20px;
  color: #000000;
  background:green;
  z-index: 9999;
}
<body>
<div class="container">

  <a href="" style="" class="hover-popup"><img src="https://picsum.photos/id/372/200/200" class="ml-4 img-call-popup"></a>

	<section class="popup-container">
  
    <div class="popup-box">
    
      <h3>Lorem Ipsum</h3>
      
      <nav class="close">&times;</nav>
      
      <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
      
    </div>
    
  </section>

</div>

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

<script type="text/javascript">
            $(function() {
  		        var self = $('.hover-popup');
                self.mouseover(function () {
        	        self.next().children('.popup-box').fadeIn(350);
                });
                self.mouseout(function () {
        	        self.next().children('.popup-box').fadeOut(350);
                });  
            });
  </script>
</body>

Posso importar as duas versões da lib em meu projeto? Ou como poderia fazer para passar o código para a versão da lib que o bootstrap utiliza?

1 Resposta 1

1

Cara seu problema é que vc está importando a versão Slim do jQuery

Veja o que vc postou

inserir a descrição da imagem aqui

Só que a versão Slim do jQuery não tem os métodos de Animação, assim como tb não tem Ajax e outras coisas por ser uma versão reduzida (por isso slim) do jQuery tradicional, maior em kb e mais completo em funcionalidades.

Veja a documentação oficial que confirma isso https://blog.jquery.com/2018/01/20/jquery-3-3-1-fixed-dependencies-in-release-tag/ inclusive eles falam que caso opte por essa versão slim vc deve fazer as animações com o CSS e não com o jQuery

Sometimes you don’t need ajax, or you prefer to use one of the many standalone libraries that focus on ajax requests. And often it is simpler to use a combination of CSS and class manipulation for all your web animations.

Por isso a sua animação funciona com a versão completa e não com a slim. Resumindo, ou anime seus elementos com CSS e use a versão SLIM, ou anime com jQuery mesmo, mas use a versão completa.


EDIT

Veja o que diz a documentação do próprio Bootstrap https://getbootstrap.com/docs/4.3/getting-started/introduction/#js

We use jQuery’s slim build, but the full version is also supported.

Eles usam a slim, mas a completa tb é suportada, pode usar sem medo!

4
  • O problema é que estou utilizando bootstrap via cdn, esse slim é a que o bootstrap recomenda lá. Será que remover essa slim o bootstrap irá funcionar de boa? será que manter as duas versões irá resultar em algum conflito? Commented 17/09/2019 às 22:59
  • @LucasInácio acabei de editar a resposta , olha ali no finalzinho o que eu deixei. O próprio BS fala que não há problemas em usar a versão completa ;)
    – hugocsl
    Commented 17/09/2019 às 23:04
  • valeu cara, era essa dúvida que eu tinha, não estou sabendo pesquisar bem as coisas, faço algumas perguntas bem bestas hehe, mas valeu pela resposta! Commented 17/09/2019 às 23:10
  • 1
    @LucasInácio normal, quando a gente não está acostumado com o framework é assim mesmo, mas com o tempo a gente fica cascudo rss. Abs
    – hugocsl
    Commented 17/09/2019 às 23:12

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 .