Modals

HTML

<div class="expandparent">
  <div>
    Click me first!
  </div>
  <div class="expandchild">
    This is the barebones version. All you need is an expandparent with any kind of button and an expandchild (i.e. menu).
  </div>
</div>


<br>
<br>
<div class="expandparent">
  <div class="backdrop"></div>
  <div class="button">
    Click here!
  </div>

  <div class="expandchild fixed">

    <div class="card">

      <p>This is a modal pop up. It is fixed in the center of the screen.</p>
      <p>
        There is an additional optional element in this "expandparent" with class "backdrop". This will be a dark background covering the entire page.
      </p>

      <div class="closebtn">
        Close window
      </div>
    </div>
  </div>
</div>

<div class="expandparent">
  <div class="button">
    Click here!
  </div>


  <div class="expandchild absolute">
    <div class="card">
      <p>
        This will fold out with an absolute position like a drop down menu. The "card" element in here is just for demonstration with css. It is adviced that you do not apply all your custom css to the existing classes and elements, but instead place your own
        stuff inside the expandchild etc.
      </p>
    </div>
  </div>
</div>

<div class="expandparent">
  <div class="button">
    Click here!
  </div>


  <div class="expandchild slide individual absolute">
    <p>
      This one will slide down, and is absolute positioned. It is also individual, which means a click outside it will not close it. It can only be closed from the button.
    </p>
  </div>
</div>

<div class="expandparent">
  <div class="button">
    Click here!
  </div>


  <div class="expandchild individual slide">
    <p>
      This one will slide down and be individual. There is also a custom close button inside the modal.
    </p>
    <div class="closebtn">
      CLICK HERE TO CLOSE
    </div>
  </div>
</div>

<div class="expandparent">
  <div class="button">
    Click here!
  </div>


  <div...

CSS

/*NECESSARY CSS FOR EXPANDS*/

.expandchild {
  display: none;
  position: relative;
  z-index: 2;
}

.backdrop {
  display: none;
  background: rgba(0, 0, 0, 0.7);
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 1;
  pointer-events: none;
}

.expandchild.absolute {
  position: absolute;
}

.expandchild.fixed {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


/*
ONLY DEMONSTRATIONAL CSS BELOW
ERASE THIS OR REPLACE IT WITH ALL YOUR OWN CSS,
IT'S NOT NECESSARY FOR FUNCTION
*/

.card {
  background-color: white;
  padding: 16px;
  border-radius: 3px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
}

ul.menu {
  list-style: none;
  display: inline-block;
  padding: 0;
}

li {
  float: left;
}

.button {
  display: inline-block;
  background: grey;
  color: darkgrey;
  padding: 6px;
  user-select: none;
  cursor: pointer;
}

.text {
  font-family: sans-serif, sans, "Arial";
  font-size: 36px;
  color: white;
}

JavaScript

var speed = 200;

//Hides element with respective assigned animation
function hideElement(expchild) {
  expchild.filter(".slide").slideUp(speed);
  expchild.filter(".pop").hide();
  expchild.filter(".noanimation").hide();
  expchild.filter(":not('.slide'), :not('.pop'), :not('.noanimation')").fadeOut();
}

//Shows element with respective assigned animation
function showElement(expchild) {
  expchild.filter(".slide").slideDown(speed);
  expchild.filter(".pop").show();
  expchild.filter(".noanimation").show();
  expchild.filter(":not('.slide'), :not('.pop'), :not('.noanimation')").fadeIn();
}

//Calls to hide selected element (along with "backdrop" if any)
function expHide(expchild) {
  var backdrop = expchild.siblings(".backdrop");
  hideElement(expchild);
  if (backdrop.length) {
    hideElement(backdrop);
  }
}

//Calls to show selected element (along with "backdrop" if any)
function expShow(expchild) {
  var backdrop = expchild.siblings(".backdrop");
  showElement(expchild);
  if (backdrop.length) {
    showElement(backdrop);
  }
}


//Event is fired on clicking an element inside "expandparent" (which is not "expandchild"), 
//this would be any button you place inside "expandparent"
jQuery(document).on("click", ".expandparent > *:not('.expandchild')", function() {
  jthis = jQuery(this);
  var expchild = jthis.parent().find(".expandchild");
  if (expchild.length && expchild.is(":visible")) {
    expHide(expchild);
  } else if (expchild.length) {
    expShow(expchild);
  }
});

//Hides all "expandchildren" outside of your point of click
jQuery(document).on("click", function(event) {
  //Define closest "expandchild" of your point of click
  clickedtarget = jQuery(event.target).parents('.expandparent').find(".expandchild");
  //Calls to hide all "expandchilren" (which are not set as "individual") except for the one corresponding to your point of click
  expHide(jQuery(".expandchild:not('.individual')").not(clickedtarget));
});

//Hides expandchild on clicking...