<!doctype html>

<html>

    <head>

        <title>Facebook Style Popup Design</title>

        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

        <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">

        <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">

         <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

         <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>

        <style>

        	html, body {

			  background: #f1f1f1;

			  margin: 0;

			}



			.chat_container {

			  /*position: absolute;*/

			  /*top: 0;

			  bottom: 0;*/

			  margin: auto;

			 /* right: 0;

			  left: 0;*/

			  /*width: 500px;

			  height: 500px;*/

			  position: relative;

			  width: 100vw;

			  height: 100vh;

			}

			.chat_container .chat {

			  position: absolute;

			  /*width: 400px;

			  height: 400px;*/

			  width: 100%;

			  height: 90%;

			  /*top: 0;*/

			  bottom: 0;

			  margin: auto;

			  left: 0;

			  right: 0;

			  background: white;

			  border-radius: 10px;

			  -webkit-transform: scale(0);

			          transform: scale(0);

			  box-shadow: 0 5px 60px 10px rgba(0, 0, 0, 0.12);

			}

			.chat_container .chat::after {

			  content: '';

			  display: block;

			  position: absolute;

			  width: 0;

			  height: 0;

			  border-left: 15px solid rgba(0, 0, 0, 0);

			  border-bottom: 15px solid rgba(0, 0, 0, 0);

			  border-top: 15px solid rgba(0, 0, 0, 0);

			  border-right: 15px solid white;

			  left: -25px;

			  top: 7px;

			}

			.chat_container .chat .textbox {

			  position: absolute;

			  width: 100%;

			  height: 50px;

			  box-shadow: 0px -2px 10px rgba(0, 0, 0, 0.07);

			  bottom: 0;

			}

			.chat_container .chat .textbox .input {

			  width: 82%;

			  height: 35px;

			  display: block;

			  position: relative;

			  float: left;

			  margin-left: 10px;

			  border: none;

			  padding: 3px;

			  border-bottom: 2px solid rgba(0, 0, 0, 0.15);

			}

			.chat_container .chat .textbox .send {

			  position: absolute;

			  bottom: 0;

			  right: 0;

			  width: 50px;

			  height: 50px;

			  text-align: center;

			  line-height: 50px;

			  font-size: 40px;

			  color: #1E88E5;

			}



			.bubble {

			  width: 75px;

			  height: 75px;

			  border-radius: 50%;

			  position: fixed;

			  top: 50%;

			  left: -25px;

			  box-shadow: 0 0px 20px rgba(0, 0, 0, 0.19), 0 0px 6px rgba(0, 0, 0, 0.23);

			  background: url("https://media.licdn.com/media/AAEAAQAAAAAAAAc8AAAAJDk4ZjZhZTJhLTRlNzYtNGYzMy05ZjAwLWYyNjljYTBlMWFiNA.jpg") white;

			  background-size: cover;

			}

			.bubble:hover {

			  transition: all 0.3s;

			  -webkit-transform: scale(1.1);

			          transform: scale(1.1);

			}

			.bubble__span {

			  position: absolute;

			  left: 70px;

			  background: #333;

			  border-radius: 10px;

			  padding: 5px;

			  color: white;

			  font-family: 'Roboto';

			  opacity: 0;

			}

			.bubble:active {

			  -webkit-transform: scale(1.2);

			          transform: scale(1.2);

			  transition: all 0.3s;

			}



			.chat-thread {

			  padding: 20px;

			  margin: 10px;

			  list-style: none;

			  overflow-x: hidden;

			}

			.chat-thread li {

			  position: relative;

			  clear: both;

			  display: inline-block;

			  padding: 10px 20px 10px 15px;

			  margin-bottom: 10px;

			  font-family: 'Roboto';

			  font: 14px;

			  border-radius: 25px;

			}

			.chat-thread .message-mit {

			  background: #1E88E5;

			  float: right;

			  color: white;

			}

			.chat-thread .message-dest {

			  background: #CFD8DC;

			  float: left;

			}

			.chat-thread .loading .material-icons {

			  color: rgba(200, 200, 200, 0.8);

			  font-size: 8px;

			  padding: 1px;

			  margin-bottom: 5px;

			}

			.chat-thread .loading .material-icons:nth-child(1) {

			  -webkit-animation: writing 1.2s infinite alternate;

			          animation: writing 1.2s infinite alternate;

			}

			.chat-thread .loading .material-icons:nth-child(2) {

			  -webkit-animation: writing 1.2s infinite 0.2s alternate;

			          animation: writing 1.2s infinite 0.2s alternate;

			}

			.chat-thread .loading .material-icons:nth-child(3) {

			  -webkit-animation: writing 1.2s infinite 0.3s  alternate;

			          animation: writing 1.2s infinite 0.3s  alternate;

			}



			.bouncein {

			  -webkit-animation: bounce 0.4s ease-out forwards 0.2s;

			          animation: bounce 0.4s ease-out forwards 0.2s;

			}



			.bounceout {

			  animation: bounce 0.25s ease-out forwards reverse;

			}



			@-webkit-keyframes bounce {

			  0% {

			    -webkit-transform: scale(0);

			            transform: scale(0);

			  }

			  60% {

			    -webkit-transform: scale(1.1);

			            transform: scale(1.1);

			  }

			  100% {

			    -webkit-transform: scale(1);

			            transform: scale(1);

			  }

			}



			@keyframes bounce {

			  0% {

			    -webkit-transform: scale(0);

			            transform: scale(0);

			  }

			  60% {

			    -webkit-transform: scale(1.1);

			            transform: scale(1.1);

			  }

			  100% {

			    -webkit-transform: scale(1);

			            transform: scale(1);

			  }

			}

			@-webkit-keyframes writing {

			  0% {

			    -webkit-transform: translateY(0px);

			            transform: translateY(0px);

			  }

			  50% {

			    -webkit-transform: translateY(5px);

			            transform: translateY(5px);

			  }

			  100% {

			    -webkit-transform: translateY(-5px);

			            transform: translateY(-5px);

			  }

			}

			@keyframes writing {

			  0% {

			    -webkit-transform: translateY(0px);

			            transform: translateY(0px);

			  }

			  50% {

			    -webkit-transform: translateY(5px);

			            transform: translateY(5px);

			  }

			  100% {

			    -webkit-transform: translateY(-5px);

			            transform: translateY(-5px);

			  }

			}



        </style>

        

        

    </head>

    <body>

       

		<div class="chat_container" style="background: red;">

			<div>

			  	<div class="bubble"></div>

					<div class="chat">

					    <ul class="chat-thread">

					      <li class="message-mit">Hi Codepen!</li>

					      <li class="message-dest">Hi, what are you going to do today?</li>

					      <li class="message-mit loading"><i class="material-icons">lens</i><i class="material-icons">lens</i><i class="material-icons">lens</i></li>

					    </ul>

					    <div class="textbox"><input class="input" type="text"><span class="send"><i class="material-icons">send</i></span></div>

				  	</div>

		  		</div>

			</div>



		</div>

        

    </body>

    <script>

			$(".bubble").draggable();



			var isMoving = false;

			var isdragging = false;

			var chatMode = false;



			function closeChat(){

			    $(".bubble").css("top", "50%").css("left", "-25px").css("transition", "all 0.5s");

			    $(".chat").addClass("bounceout").removeClass("bouncein");

			    $(".chat").replaceWith($(".chat").clone(true));

			}





			$(".bubble").on("click", function(){

			  

			  var pos = $(".chat_container").offset();

			  

			  if(chatMode){

			    closeChat();

			    chatMode = false;

			  }else{

			      $(".chat").addClass("bouncein").removeClass("bounceout");

			      $(".bubble").css("top", (pos.top + 30) + "px").css("left", (pos.left - 70) + "px").css("transition", "all 0.3s");

			      $(".chat").replaceWith($(".chat").clone(true));

			    chatMode = true;

			  }

			});



			$(".bubble").mousedown(function(){

			  isdragging = false;

			});



			$(".bubble").mousemove(function(){

			  isdragging = true;

			  $(this).css("transition", "all 0s");

			});



			$(".bubble").mouseup(function(e){

			  e.preventDefault();

			  var lastY = window.event.clientY;

			  var lastX = window.event.clientX;

			  var swidth = $( window ).width();

			  

			  if(isdragging){

			    

			    if(chatMode){

			      chatMode = false;

			      closeChat();

			    }

			    

			    if(lastX > (swidth/2)){

			      $(this).css("top", lastY).css("left", (swidth-55) + "px").css("transition", "all 0.4s");

			    }else{

			      $(this).css("top", lastY).css("left", "-25px").css("transition", "all 0.4s");

			    }

			  }

			});

        </script>

</html>