jQuery popup with image (box with black transparent overlay) on HTML page
Question
I am creating a webpage, that will have a jQuery popup with a image that will appear automatically when a website loads. I want the popup to create a black transparent overlay,(link:) like this . It was easier to create that popup. But I fail to do this with the image. I want the popup to appear 30% from the left border of the page. The image and the black overlay shall disaper on hover and reappear when the user moves the mouse. How am I to do?
Here is the Html code:
<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/Sciptquery.js"></script>
</footer>
And the jQuery:
$(function() {
//----- OPEN when page loads
$(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();
});
});
});
And last, the CSS code:
.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 function */
.popup-hover {
transition:ease 0.25s all;
-webkit-transform:translate(50%, -50%);
transform:translate(50%, -50%);
}
}
}
I have modified the code I used for the popup on the image that is attached to the post. But something is clearly wrong.
1 answers
solution1
0 2017-01-30 22:29:01
Aside from a few simple syntax issues, the main issue here is with your selectors. Let's take a look at some of them...
//[cha-popup-close]
var targeted_popup_class = $('[cha-popup-close]').attr('cha-popup-close');
//[cha-popup]
$('[cha-popup="' + targeted_popup_class + '"]').fadeOut(350);
//[data-popup]
$('[data-popup="' + targeted_popup_class + '"]').fadeOut(350);
A selector within square brackets like [cha-popup-close] is looking for an attribute of cha-popup-close .
If you look at your HTML, you do not have any elements that have an attribute named cha-popup or cha-popup-close , and so essentially none of your selectors are actually selecting anything.
The [data-popup] selector is the only one that will actually find anything, because there are elements with a data-popup attribute.
Using the proper selectors, I believe what you're after is something like this:
$(document).ready(function() {
//Get popup to open and fade it in
var targeted_popup_class = $('[data-popup-open]').data('popup-open');
$('[data-popup="' + targeted_popup_class + '"]').fadeIn(350);
//CLOSE on hover
$('[data-popup-close]').on('mouseover', function(e) {
//Get popup to close and hide it
var targeted_popup_class = $(this).data("popup-close");
$('[data-popup="' + targeted_popup_class + '"]').fadeOut(350);
});
});
In addition to fixing up your selectors, I've tidied up your code a bit, fixed the extra curly brackets you had laying around, and most notably changed your .on("hover") (which doesn't work) to .on("mouseover")
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.