JSFiddle - React, Tailwind, and code Playground

by ktabarez

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.js"></script>
<div style="height: 2000px; padding: 20px">
  <button id="showDialog" class="btn btn-primary">
    Show
  </button>
  <div id="dialog">
    <input type="text" id="dialogInput" class="form-control" />
    <button id="closeDialog" class="btn btn-danger">
      Close
    </button>
  </div>
</div>

CSS

#dialog {
  width: 400px;
  height: auto;
  background-color: lightgrey;
  display: none;
  padding: 10px;
  position: fixed;
  top: 70px;
}

#showDialog {
  margin-bottom: 10px;
}

#dialogInput {
  width: 100%;
  margin-bottom: 20px;
}

button {
  width: 100px;
  height: 40px;
}

JavaScript

var focused = false;

$('#showDialog').click(function() {
  $('#dialog').show();
  focused = false;
});

$('#closeDialog').click(function() {
  $('#dialog').hide();
});

$('#dialogInput').focus(function() {
  focused = true;
});

$('#dialogInput').blur(function() {
  focused = false;
});


    $(document).ready(function () {
        $(window).scroll(function () {
            /*check both html,body and body for cross-browser compatibility*/
            if ($('html,body').scrollTop() > 89 || $('body').scrollTop() > 89) {
                 $('#dialog').hide();
            } else {

            }
        });
    });