Close modal box [Answered]RSS

• • Reply
  KDev

  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]();
  }

  
  });

• • Reply
  Fei Han - MS...

  All-Star

  38666 Points

  5490 Posts

  Microsoft

  Re: Close modal box

  Aug 01, 2016 03:15 AM|Fei Han - MSFT|LINK

  Hi KDev,

  KDev

  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.

  $("span.close").click(function () {
      $("your modal element").hide();
  }) 
  

  Best Regards,

  Fei Han

  
  MSDN Community Support
  Please remember to "Mark as Answer" the responses that resolved your issue.