CODEWITHSUNDEEP
javascriptjqueryhtml
Lisa Frank
Lisa Frank

Reputation: 19

Jquery Modal: on background click add class and remove html

I am really new to jquery. This code is supposed to dismiss the modal if you click on the background by adding a class and removing it. Any thoughts on why this isn't working? Please & Thank you 

<!-- modal conent-->
<div class="modal" id="modal"><!--black background to the modal -->
  <div class="modal-content ">
    <h1>Tricks Are 4 Kids</h1>
    <p>stuff here....</p>
    <button href="#" class="close" id="close" >X</button>
  </div>
</div>  
<!-- page conent-->
<div id="page-content-wrapper" >I am a div with all the page conent. lalalalala</div>

Jquery

$(document).ready( function() {
$('#modal').on('click', function(e) {
  if (e.target !== this)
    return;

  $('#modal').addClass('md-effect', function() {
        $(this).remove('300');
    });  }); 
  // If user clicks on the background add class for animation of modal and then removes html
});

Upvotes: 0

Views: 200

Answers (1)

Wesley Smith
Wesley Smith

Reputation: 19571

You have several problems here.

From the docs

.remove( [selector ] )

selector

Type: String

A selector expression that filters the set of matched elements to be removed.

You have no element with the element name 300 therefore nothing is removed.

From the docs, .addClass() has two signatures:

.addClass( className )

className

Type: String

One or more space-separated classes to be added to the class attribute of each matched element.

or

addClass( function )

function

Type: Function( Integer index, String currentClassName ) => String

A function returning one or more space-separated class names to be added to the existing class name(s). Receives the index position of the element in the set and the existing class name(s) as arguments. Within the function, this refers to the current element in the set.

There is no .addClass( classname [, function ]) signature so this cant work and the second parameter, the callback, is ignored:

$('#modal').addClass('md-effect', function() {
        $(this).remove('300');
 });

Lastly, (e.target !== this) is not enough by itself. With just this, if you click a button or other element inside the modal, it will register as a click outside the modal. You need to also check if the clicked element is a descendant of the modal as well.

To make this work you could, use .addClass() and setTimeout

$(document).ready(function() { 
  $(document).mouseup(function(e) {
    var $modal = $("#modal");
    // if the target of the click isn't the container... nor a descendant of the container
    if ($modal.is(e.target) || $modal.has(e.target).length !== 0) return;
    $modal.addClass('md-effect');
    setTimeout(function() { $modal.remove(); }, 300);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<!-- page conent-->
<div id="page-content-wrapper">I am a div with all the page conent. lalalalala</div>
<!-- modal conent-->
<div class="modal" id="modal">
  <!--black background to the modal -->
  <div class="modal-content">
    <h1>Tricks Are 4 Kids</h1>
    <p>stuff here....</p>
    <button href="#" class="close" id="close">X</button>
  </div>
</div>

Upvotes: 1

Related Questions