I would like to close my modal box with span close
Would you like to close/hide modal box by clicking <span> tag? From your code, we could not find you attach click event to this <span> tag. We could call
.hide() method or dynamically set display property to
none to hide the matched element.
.NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.
None
0 Points
1 Post
Close modal box
Jul 30, 2016 10:34 PM|KDev|LINK
Hello, I would like to close my modal box with span close, but it takes too much time for me. Please give me some pieces of advice.
My modal html object:
<div class="single-product page" id="1">
<div class="overlay"></div>
<div class="preview-large">
<h3>Sony Xperia Z3</h3>
<img src="assets/images/sony-xperia-z3-large.jpg">
<b> Price: </b>899<br><br>
<b> Manufacturer: </b>Sony<br><br>
<b>Storage: </b>16<br><br>
<b> OS:</b>Android<br><br>
<b> Camera: </b>15
<span class="close" >×</span></div></div>
My js:
$(function () {
var checkboxes = $('.all-products input[type=checkbox]');
$('#clear_filters').click(function (e) {
$(checkboxes).attr('checked', false);
});
$('.single-product').click(function (e) {
if ($(this).hasClass('visible')) {
var clicked = $(e.target);
if (clicked.hasClass('close') || clicked.hasClass('overlay')) {
window.location.hash = "/#";
}
}
});
$(window).on('hashchange', function(){
render(window.location.hash);
});
function render(url) {
var temp = url.split('/')[0];
$('.main-content .page').removeClass('visible');
var map = {
'': function() {
$('.all-products').addClass('visible');
},
'#product': function() {
var index = url.split('product/')[1].trim();
$("#"+index+".single-product").addClass('visible');
}
};
map[temp]();
}
});
All-Star
40535 Points
6233 Posts
Microsoft
Re: Close modal box
Aug 01, 2016 03:15 AM|Fei Han - MSFT|LINK
Hi KDev,
Would you like to close/hide modal box by clicking <span> tag? From your code, we could not find you attach click event to this <span> tag. We could call .hide() method or dynamically set display property to none to hide the matched element.
Best Regards,
Fei Han