js error in modal(popup)

Question

My doubt is about a modal code that I have modified for error js and modal does not open

this is the html part:

<div class="page-wrapper">
  <a class="btn trigger" href="javascript:;">Click Me!</a>
 </div>
<div class="modal-wrapper">
  <div class="modal">
    <div class="head">
      <a class="btn-close trigger" href="javascript:;"></a>
    </div>
     <div class="content">
    </div>
  </div>
</div>

and that’s the part of js that I put before the tag closed :

    <script type="text/javascript">
        $(document).ready(function() { //erro nessa linha "Uncaught ReferenceError: $ is not defined"
          $('.trigger').click(function() {
             $('.modal-wrapper').toggleClass('open');
            $('.page-wrapper').toggleClass('blur');
             return false;
          });
        });
    </script>

I tried to modify but this not advancing much, you know what can be?

Answer 1

$(document).ready(function () {
  
          $('.trigger').click(function() {
             $('.modal-wrapper').toggle("open");
             $('.page-wrapper').toggle("blur");
          }); 
              return false; //aqui o return fica fora do click function
        });

.modal-wrapper{
		
position: absolute;
		width: 600px;
		height: 220px;
		top: 65px;
		background: #12C12B;
	}
		.page-wrapper{
		
position: absolute;
		width: 600px;
		background: #12C12B;
	}

<!-- essa linha é necessária -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- essa linha é necessária -->

<div class="page-wrapper">
  <a class="btn trigger" href="javascript:;">Click Me!</a>
 </div>
<!-- aqui coloquei sua div como hidden -->
<div class="modal-wrapper" hidden>
  <div class="modal">
    <div class="head">
      <a class="btn-close trigger" href="javascript:;"></a>
    </div>
     <div class="content">
    </div>
  </div>
</div>

Oi Day adapt as needed