pop-up with picture box using jquery

Question

pop-up with picture box using jquery

Asked 5 years ago

Viewed 71 times

1

I’m trying to make a pop-up, but it’s making a mistake fadeIn is not a function at HTMLAnchorElement, because I use that jquery via Cdn because of the bootstrap:

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

The intention was to display this box when passing with the mouse pointer on top of the image, which is what I get with this jquery:

src="https://code.jquery.com/jquery-3.4.1.min.js" Integrity="sha256-Csxorxvzctkaix6yvo6hppczgetbymgwsflbw8hfcjo=" crossorigin="Anonymous"

with this above I can accomplish what I want and it was the one I used here, even you will notice some class names of the bootstrap Follows the code:

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

Can I import both versions of lib into my project? Or how could I pass the code to the lib that the bootstrap uses?

1 answer

Browser other questions tagged javascript jquery twitter-bootstrap popup

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

by hugocsl • **65,517** points · Answer 1 · 2019-09-17T22:32:07+00:00

Dude your problem is that you’re importing the version Slim jQuery

Look what you posted

Only that the Slim version of jQuery does not have the Animation methods, just as tb does not have Ajax and other things by being a reduced version (so slim) of the traditional jQuery, larger in kb and more complete in functionalities.

See the official documentation confirming this https://blog.jquery.com/2018/01/20/jquery-3-3-1-fixed-dependencies-in-release-tag/ even they say that if you choose this slim version you should do the animations with CSS and not with 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.

That’s why your animation works with full version and not with the slim. Summarize, or animate your elements with CSS and use the version SLIM, or anime with same jQuery, but use the full version.

EDIT

See what the Bootstrap documentation says https://getbootstrap.com/docs/4.3/getting-started/introduction/#js

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

They use the slim, but the full tb is supported, can use without fear!