My goal is to add a jQuery popup with an image that appears automatically when a website loads. I envision the popup creating a black transparent overlay, similar to this example. While setting up the basic popup was straightforward, integrating the image has proven to be a challenge. Ideally, I want the popup to be positioned 30% from the left border of the page. Furthermore, both the image and the black overlay should disappear on hover and reappear when the user moves the mouse. How can I achieve this?
Below is the HTML code snippet:
<head>
script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
</head>
<body>
<a class="cha" data-popup-open="popup-imonelle" href="#"></a>
<div class="cha-popup" data-popup="popup-imonelle">
<div class="popup-pic">
<img src="Images/imonelle.jpg"/>
<a class="popup-hover" data-popup-close="popup-imonelle" href="#">x</a>
</div>
</div>
</body>
<footer>
<script src="js/Scriptquery.js"></script>
</footer>
Here is the associated jQuery code:
$(function() {
//----- OPEN on page load
$(function(e) {
var targeted_popup_class = $('[cha-popup-close]').attr('cha-popup-close');
$('[cha-popup="' + targeted_popup_class + '"]').fadeOut(350);
});
//----- CLOSE on hover
$('[cha-popup-close]').on('hover', function(e) {
var targeted_popup_class = jQuery(this).attr('cha-popup-close');
$('[data-popup="' + targeted_popup_class + '"]').fadeOut(350);
e.preventDefault();
});
});
Lastly, the CSS styles for the popup:
.cha-popup {
width:100%;
height:100%;
display:none;
position:fixed;
top:0px;
left:0px;
background:rgba(0,0,0,0.75);
}
/* Inner */
.popup-pic {
max-width:845px;
width:90%;
padding:0px;
position:absolute;
top:50%;
left:30%;
-webkit-transform:translate(-50%, -50%);
transform:translate(-50%, -50%);
box-shadow:0px 2px 6px rgba(0,0,0,1);
border-radius:3px;
background:#fff;
}
/* Close on hover functionality */
.popup-hover {
transition:ease 0.25s all;
-webkit-transform:translate(50%, -50%);
transform:translate(50%, -50%);
}
I have attempted to adapt my existing popup code for the image integration described above, but it seems like something is amiss. Any guidance would be greatly appreciated.