I have a fairly simple page with a couple divs designed to be pop ups...
I'm having an issue with the .close
div located in a jQuery populated popup. A btn is clicked .. jquery brings up a div and then populates it with content from another div.
This all works as expected.
There's a .close
div in the popups designed to be, well a close button.
$('body, .close').on('click', function(e) {
e.preventDefault();
e.stopPropagation();
$('#info').html('').removeClass('pop').fadeOut(300);
$('#pup').children('h1').html('');
$('#pup').fadeOut(300);
$('#cov').fadeOut(300);
console.log('clk');
});
This works perfectly when the .close
div is hard coded into the popup itself.. but it will not function in the when content is populated from somewhere else.
Can anyone shed some light on what I'm missing please?
// included so snippet functions....
var cards = $(".smpl");
cards.each(function(i) {
var im = $(this).attr('data-im');
var fadeTime = 180;
$(this).css('background-image', 'url(_core/img/p/' im ')')
$(this).delay(fadeTime * i).fadeIn(fadeTime);
});
// loaded #info with content from other divs
$('.about, .cont').on('click', function(e) {
e.preventDefault();
e.stopPropagation();
var wht = $(this).attr('data-t');
$('#info').removeClass('pop').html(''); //empty's info popup if its present
$('#pup').hide(); //hides other popup if its present
$('#cov').fadeIn(300);
$('#info').addClass('pop').html($(wht).html()).fadeIn(300);
console.log(wht);
});
// Should close all popups - FAIL for the #info .close div
// ###### this is where something is not right or borken...
$('body, .close').on('click', function(e) {
e.preventDefault();
e.stopPropagation();
$('#info').html('').removeClass('pop').fadeOut(300);
$('#pup').children('h1').html('');
$('#pup').fadeOut(300);
$('#cov').fadeOut(300);
console.log('clk');
});
$('#info').on('click', function(e) {
e.preventDefault();
e.stopPropagation();
});
$('#pup').on('click', function(e) {
e.preventDefault();
e.stopPropagation();
});
//This opens #pup div
$('.sp, .ai, .ot').on('click', function(e) {
e.preventDefault();
e.stopPropagation();
var imgsrc = $(this).attr('data-im');
var longDes = $(this).children('.dspt').attr('data-ld');
$('#cov').fadeIn(300);
$('#pup').addClass('pop');
$('#pup h1').html(longDes);
$('#pup').css('background-image', 'url(_core/img/p/' imgsrc ')').fadeIn(300);
});
.nav {
position: absolute;
right: 30px;
top: 20px;
list-style: none;
z-index: 9997;
}
.nav a:link,
.nav a:visited {
display: block;
transition: all 0.5s;
font-size: 13px;
line-height: 22px;
width: 76px;
text-transform: uppercase;
background: #07e;
color: #fff;
padding: 2px 5px;
border-radius: 3px;
height: 25px;
position: relative;
right: 20px;
cursor: pointer;
margin: 5px 0;
text-align: center;
box-shadow: 0 -2px 0 #fff;
}
.smpl {
overflow: hidden;
position: relative;
float: left;
border: 1px solid #aaa;
padding: 0;
display: none;
width: 100%;
max-width: calc((100% - 60px) / 10);
height: auto;
margin: 5px 5px 0 0;
background-size: cover;
background: #aaa;
}
h1.dspt {
position: absolute;
bottom: -50px;
width: 100%;
background: #2d2d2d;
color: #fff;
text-transform: none;
padding: 5px;
opacity: 0;
transition: all .5s;
}
.smpl:hover h1.dspt {
bottom: 0;
transition: all .5s;
background: #07e;
opacity: 0.8;
}
#over,
#cov {
width: 100%;
height: 100%;
background: #aaa;
display: none;
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
z-index: 9991;
opacity: 0.8;
}
#cov {
background: #fffs;
opacity: 0.9;
}
#pup,
#info {
width: 150px;
height: 150px;
background-color: #fff;
display: none;
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translate(0, -50%);
z-index: 9998;
opacity: 1;
margin: 0 auto;
border: 1px solid #aaa;
box-shadow: 0 5px 50px #666;
overflow: hidden;
display: none;
}
#pup h1.dspt {
position: absolute;
bottom: -50px;
width: 100%;
background: #2d2d2d;
color: #fff;
text-transform: none;
font-size: 16px;
padding: 15px 40px;
opacity: 0;
transition: all .5s;
text-align: left;
text-shadow: 2px 0 1px #000;
}
#pup:hover h1.dspt {
bottom: 0;
transition: all .5s;
background: #2d2d2d;
opacity: 0.8;
}
#info {
padding: 10px;
overflow-Y: auto;
border: 3px solid #333;
border-radius: 6px;
}
.pop .close {
position: absolute;
top: -40px;
right: -40px;
width: 30px;
height: 30px;
border-radius: 50%;
background: #333;
color: #fff;
opacity: .5;
font-weight: bold;
text-align: center;
font-size: 16px;
line-height: 30px;
transition: all .5s;
cursor: pointer;
}
.pop:hover .close {
top: 10px;
right: 10px;
transition: all .5s;
background: #2d2d2d;
opacity: 0.8;
z-index: 9999;
}
#about,
#cont {
display: none;
background: #fff;
padding: 10px;
position: relative;
text-align: left;
margin: 10px 0 0 0;
border: 1px solid #ddd;
border-radius: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="cov"></div>
<div id="info"></div>
<div id="pup">
<h1 ></h1>
<div >X</div>
</div>
<div >
<div >
<div >
<div >
<ul >
<li><a href="#" data-t="#about">about</a></li>
<li><a href="#" data-t="#cont">contact</a></li>
</ul>
</div>
</div>
<div id="content">
<div id="about">
<div >X</div>
<h4>about - Info Div</h4>
<p>Hover to see close btn, but it fails to function.
<p>
</div>
<div id="cont">
<div >X</div>
<p>Contact - Info div</p>
<p>Hover to see close btn, but it fails to function.
<p>
</div>
<div >
<div >
<div data-im="h1pc_15px.png">
<div ></div>
<h1 data-ld="#pup div">Pup Div</h1>
<img alt="H" src="_core/img/p/_blank.png"></div>
</div>
</div>
</div>
</div>
<!-- // grid padding -->
</div>
<!-- //grid container -->
Snippet Above ..
- If you click the [broken] image
- the
#pup
popup shows - clicking outside
#pup
(grey area) removes the popup (- GOOD) - clicking the
.close
div removes the popup (- GOOD).
- Click "about" or "contact" in the header
- the
#info
popup shows - clicking outside that popup (grey area) closes it (- GOOD)
- clicking the
.close
div simply won't trigger the close event (- FAIL).
Suggested that it was due to the click event on body
and stopPropagation... So I tested...
$('.about, .cont').on('click', function (e) {
e.preventDefault();
//e.stopPropagation();
var wht = $(this).attr('data-t');
$('#info').removeClass('pop').html(''); //empty's info popup if its present
$('#pup').hide(); //hides other popup if its present
$('#cov').fadeIn(300);
$('#info').addClass('pop').html($(wht).html()).fadeIn(300);
console.log(wht);
});
$('#cov, .close').on('click', function(e) {
e.preventDefault();
//e.stopPropagation();
$('#info').html('').removeClass('pop').fadeOut(300);
$('#pup').children('h1').html('');
$('#pup').fadeOut(300);
$('#cov').fadeOut(300);
console.log('clk');
});
Issue remains.
CodePudding user response:
I works if you change the click function to: $(document).on('click', 'body', '.close', function()
You also need to remove this bit:
$('#info').on('click', function(e) {
e.preventDefault();
e.stopPropagation();
});
$('#pup').on('click', function(e) {
e.preventDefault();
e.stopPropagation();
});