JSFiddle - React, Tailwind, and code Playground

by shanejones

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.1.1/normalize.css">


<div class="modal-wrap">
  <div class="inner">
    <a href="#" class="close">&times;</a>
    <h1>I'm a modal... mooo!</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus amet eum ea, rem aperiam, ad! Labore eum, sequi dignissimos culpa explicabo quisquam harum repellat in et laboriosam odio dolore praesentium!</p>
  </div>
</div>

SCSS

.modal-wrap {
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.25);
  
  .inner {
    width: 50vw;
    box-sizing: border-box;
    padding: 20px;
    background: white;
  }
  
  .close {
    float: right;
    text-decoration: none;
    color: #f66344
  }
  
}

JavaScript

$(document).mousemove(function(e){
		
    if( i_am_close( $('.close'), 20, e ) ) {
        $('h1').text('Please don\'t close me, I\'ll be sad')
    }
});

/*
 * first arg is the element you want to be close too 
 * second arg is the distance from the element
 * third arg is the mouse event from the aboce jQuery
 */
function i_am_close(element, pixels_away, e){
  	var l = element.offset().left - pixels_away,
        t = element.offset().top - pixels_away,
        r = l + element.width() + ( 2 * pixels_away ),
        b = t + element.height() + ( 2 * pixels_away ),
        x = e.pageX,
        y = e.pageY;
        
    return ( x > l && x < r && y > t && y < b );
}