On Click add box on mouse pointer

by Santosh Thakur

HTML

<div class="wraper">
  <div id="contentArea" class="container">
    <input type="text" value="" id="txt" placeholder="Type Your Text" />
    <button>Add text</button>
  </div>
  <div class="addText">
    <h1>Text Here</h1>

    <p></p>
  </div>
  <div id="log"></div>
</div>

CSS

.container {
  border: 1px solid #ccc;
  width: 200px;
  height: 100px;
  position: absolute;
  padding: 5px;
  background: #fff;
  z-Index: 10;
}

JavaScript

$(document).ready(function() {
  $('#contentArea').hide();
  $(this).on('click', function() {
    $('#contentArea').hide();
  });
});
$(document).on("click", function onClickBox(event) {
  //var showDiv =  $('.container').show();
  var pageX = '';
  var pageY = '';
  $("#log").text("pageX: " + event.pageX + ", pageY: " + event.pageY);
  $('#contentArea').css({
    "left": event.pageX,
    "top": event.pageY
  });
  $('#contentArea').show();
});

$('button').click(function(e) {
  var data1 = $("#txt").val();
  $('#contentArea').hide();
  $(".addText p").append('Added text is here :- ' + data1 + '<br/>');
  return false;
});