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">×</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?