[SOLVED] How do I make the background of a modal clickable?

How do I make the background of a modal clickable?

I want to create a chatbox that can be plugged into website. I have been using Bootstrap Modal to achieve this.

I want my modal to not close when user clicks outside the modal. But the website background should still be clickable/selectable, so that user can still perform operations on the website.

This is the code that I have written so far.

$(window).load(function () {
  $('#myModal').modal({ backdrop: 'static', keyboard: false});
  $('#myModal').modal('show');
});
function myFunction() {
  $('#myModal').modal('toggle');
  window.alert('Hello');
}

.vertical-alignment-helper {
  display:table;
  height: 100%;
  width: 100%;
  pointer-events:none; /* This makes sure that we can still click outside of the modal to close it */
}
.vertical-align-center {
  /* To center vertically */
  display: table-cell;
  vertical-align: middle;
  pointer-events:none;
}
.modal-content {
  /* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
  width:inherit;
  height:inherit;
  /* To center horizontally */
  margin: 0 auto;
  pointer-events: all;
  float: left;
  max-width: 250px;
  background-color: #ffffff;
}

.textarea-nonresizable {
  height: 10em;
  border-radius: 1em;
  outline: none; /* removes the default outline */
  resize: none; /* prevents the user-resizing, adjust to taste */
}

.header-cl {
  background-color: #262626;
  color: #FFFFFF;
  border-bottom-width: 0px;
}

.header-f {
  font-size: 14px;
  font-weight: bold;
}

.body-cl {
  background-color: #c7c8c9;
}

.foot-cl {
  border-top-width: 0px;
  padding-top: 0px;
  background-color: #c7c8c9;
  color: #FFFFFF;
}
.btn-ft {
  background-color: #3f1603;
  color: #FFFFFF;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open>.dropdown-toggle.btn-primary {
  color: #FFFFFF;
  background-color: #3f1603;
}

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="modal fade " id="myModal" role="dialog">
  <div class="vertical-alignment-helper">
    <div class="modal-dialog vertical-align-center modal-sm">
      <div class="modal-content">
        <div class="modal-header header-cl">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span class="glyphicon glyphicon-minus-sign"></span>
          </button>
          <h4 class="modal-title header-f">Contact Us</h4>
        </div>
        <div class="modal-body body-cl">
          <textarea class="form-control textarea-nonresizable" id="comment" placeholder="Type your message here"></textarea>
        </div>
        <div class="modal-footer foot-cl">
          <div style="float:left;color:#FFFFFF;font-size: 11px;line-height: 34px;">
            Powered by <strong>Stackoverflow</strong> </div>
          <button type="button" class="btn btn-primary btn-ft" onclick="myFunction()">Start Text</button>
        </div>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Solution

You could use pointer-events: none; on .modal and .modal-backdrop. Or hide .modal-backdrop with display: none;

.modal {
    pointer-events: none;
}
.modal-backdrop {
    display: none;
}

EXAMPLE