Simply modify the 'modal_id' data attribute to target the ID of the div with the 'modal_wrapper' class.

HTML

<!--Trigger-->
<div class="modal_open" data-modal_id="modal_id">Open Modal</div>

<!--Modal-->
<div class="modal_wrapper" id="modal_id">
    <div class="modal_content">
        <div class="modal_close"></div>
        <div class="modal_inner_content">
            <p>Modal Content</p>
        </div>
    </div>
</div>

JavaScript

jQuery(document).ready(function ($) {

  $('body').on('click', '.modal_open', function (event) {
      event.preventDefault();
      var modal_id = $(this).data("modal_id");
      $('#'+modal_id).show();

  });

  $('body').on('click', '.modal_close', function (event) {
      $(this).closest('.modal_wrapper').hide();
  });
    
}); //End Document Ready

SCSS

// Optional
.modal_open {
  cursor: pointer;
}

//Global Defaults
.modal_wrapper {
  background: rgba(21, 27, 35, 0.8);
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;
  margin: 0;
  transition: all .2s ease;

  .modal_content {
    position: relative;
    top: 10%;
    left: 10%;
    height: auto;
    width: 80%;
    max-width: 1500px;
    background-color: #ffffff;

    .modal_close {
      position: absolute;
      right: 10px;
      top: 10px;
      width: 30px;
      height: 30px;
      opacity: 0.3;

      &:hover {
        opacity: 1;
        cursor: pointer;
      }

      &:before, &:after {
        position: absolute;
        left: 15px;
        content: ' ';
        height: 33px;
        width: 2px;
        background-color: #333;
      }

      &:before {
        transform: rotate(45deg);
      }

      &:after {
        transform: rotate(-45deg);
      }

    }

    .modal_inner_content {
      width: 100%;
      height: 100%;
      padding: 40px;
    }

  }

}