<!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>

         <script src="https://draggabilly.desandro.com/draggabilly.pkgd.js"></script>

         



        <style>



        	.left{

        		float: left;

        	}



        	.right{

        		float: right;

        	}



        	.clear:after{

        		clear: both;

        		content: '';

        		display: block;

        	}

        	html, body {

			  background: #f1f1f1;

			  margin: 0;

			  overflow: hidden;

			}



			.pdLR5{

				padding-left: 5px;

				padding-right: 5px;

			}



			.chat_container {

			  margin: auto;

			  position: relative;

			  width: 100vw;

			  height: 100vh;

			}

			.chat_container .chat {

			  position: absolute;

			  width: 100%;

			  height: calc(100% - 80px);

			  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);

			  /*display: none;*/

			}

			/*.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 white ;

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

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

			  right: 20px;

			  top: -28px;

			}*/

			.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;

			}



			.group-bubble{

				position: fixed;

				width: 65px;

			  	height: 65px;



				top: 50%;

				left: 0px;

			}



			.group-bubble-chat,

			.bubble {

			  width: 100%;

			  height: 100%;

			  border-radius: 50%;

			  /*position: absolute;*/

			  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/AAEAAQhaschooseAAAc8AAAAJDk4ZjZhZTJhLTRlNzYtNGYzMy05ZjAwLWYyNjljYTBlMWFiNA.jpg") white;

			  background-size: cover;

			  z-index: 999;

			}



			.group-bubble-chat{

				display: none !important;

				background: yellow;

			}

			/*.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;

			}

			.group-bubble-chat:active,

			.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);

			  }

			}



			/*.list_view_chat{

				position: unset;

			}*/





			



			.clicktoggle{

				display: block!important;

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

			}

			.haschoose{

				border: 2px solid;

			}



			.haschoose::after {

			    content: '';

			    display: block;

			    /*position: fixed;*/

			    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 black;

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

			    text-align: center;

			    margin: 62px auto 0;

			}



			.bubble-sub{

				width: 100%;

				height: 100%;

				position: absolute;

			}

			.position_unset{

				position: unset;

			}



			.position_fixed{

				position: fixed;

			}

        </style>

        

        

    </head>

    <body>

	    <div class="out_chat_container">

	    	

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

				<div style="display: flex; justify-content:flex-end">

					<div class="group-bubble" style="display: flex; justify-content: flex-end;">

						<!-- <div class="group-bubble-chat"></div> -->

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

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

					  	<div class="bubble-sub">

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

					  	</div>

					  	<div class="bubble-sub">

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

					  	</div>

					  	<div class="bubble-sub">

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

					  	</div>

					  	<div class="bubble-sub">

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

					  	</div>

					</div>

				</div>



				<div class="chat">

				    <ul class="chat-thread">

				      <li class="message-mit">Hi Codepen 1!</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>

    </body>

    <script>

    	// external js: draggabilly.pkgd.js



			// get all draggie elements

		// var draggableElems = document.querySelectorAll('.anhhoa');

		

		// var draggies = []

		

		// for ( var i=0, len = draggableElems.length; i < len; i++ ) {

		//   var draggableElem = draggableElems[i];

		//   var draggie = new Draggabilly( draggableElem, {

		//     containment: true,

		//     handle: '.bubble'

		//   });

		//   draggies.push( draggie );

		// }



    	

    // 	$(".chat_container .bubble").click(function(){



				// if($(this).hasClass('haschoose') && $(this).hasClass('list_view_chat')){

				// 	$('.chat_container .bubble').removeClass('list_view_chat');

				// 	$('.chat').removeClass('clicktoggle');

				// 	$('.chat_container .bubble').removeClass('haschoose');

				// 	$('.chat_container .bubble').removeClass('position_unset');

				// 	$('.chat_container .bubble').addClass('position_fixed');

				// 	// chatMode = false;



				// }else{

				// 	if($(this).hasClass('list_view_chat')){

				// 		$('.chat_container .bubble').addClass('position_unset');

				// 		$('.chat_container .bubble').removeClass('position_fixed');



				// 		$('.chat_container .bubble').removeClass('haschoose');

	   // 					if($(this).hasClass('haschoose')){

	   						

	   // 						$(this).removeClass('haschoose');

	   // 						$(this).closest('.chat_container').find('li').find('.chat').removeClass('clicktoggle');

	   // 						$('.chat_container .bubble').addClass('position_fixed');

	   // 						$('.chat_container .bubble').removeClass('position_unset');

	   // 					}else{

	   // 						$('.chat_container .bubble').addClass('position_unset');

	   // 						$('.chat_container .bubble').removeClass('position_fixed');



	   // 						$(this).closest('.chat_container').find('li').find(".chat").removeClass('clicktoggle');

	   // 						$(this).siblings('.chat').addClass('clicktoggle');



	   // 						$(this).addClass('haschoose');



	   // 					}



				// 	}else{

	   // 					$('.chat_container .bubble').addClass('list_view_chat');



	   // 					$(this).closest('.chat_container').find('li').find('.bubble').removeClass('haschoose');

	   // 					$(this).addClass('haschoose');

	   					

	   // 					$(this).closest('.chat_container').find('li').find('.chat').removeClass('clicktoggle');

	   // 					$(this).siblings('.chat').addClass('clicktoggle');



	   // 					$('.chat_container .bubble').addClass('position_unset');

				// 		$('.chat_container .bubble').removeClass('position_fixed');



				// 		// chatMode = true;

				// 	}

				// }

				

    // 	});



  //   	var draggableElems = document.querySelectorAll('.group-bubble');

		

		// var draggies = []

		

		// for ( var i=0, len = draggableElems.length; i < len; i++ ) {

		//   var draggableElem = draggableElems[i];

		//   var draggie = new Draggabilly( draggableElem, {

		//     containment: true,

		//     handle: '.bubble'

		//   });

		//   draggies.push( draggie );

		// }



    	$(".chat_container .group-bubble").draggable();

    	// $('.chat_container .bubble').removeClass('haschoose');

		



		var isMoving = false;

		var isdragging = false;

		var chatMode = false;





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

		  isdragging = false;

		});



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

		  isdragging = true;

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

		});



		$(".group-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;

		    }

		    

		    if(lastX > (swidth/2)){

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

		    }else{

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

		    }

		  }

		});



		var sumChatHead = $('.chat_container .group-bubble .bubble').length;



		$(".chat_container .group-bubble").click(function(){

			if($('.chat_container .bubble').hasClass('haschoose')){

				$(this).find('.bubble').removeClass('haschoose');

				$('.chat').removeClass('clicktoggle');	

				$('.group-bubble-chat').css('display','none').removeClass('bubble');

				

				

				$('.group-bubble').removeClass('position_unset').css('width', 65);;

				$('.group-bubble .bubble-sub').removeClass('position_unset').removeClass('pdLR5');

				$('.group-bubble .bubble').removeClass('right').removeClass('position_unset');

			}else{

				$(this).find('bubble').addClass('haschoose');

				$('.chat').addClass('clicktoggle');	

				$('.group-bubble-chat').css('display','block').addClass('bubble');



				$('.group-bubble').addClass('position_unset').css('width', sumChatHead * 75);

				$('.group-bubble .bubble-sub').addClass('position_unset').addClass('pdLR5');

				$('.group-bubble .bubble').addClass('right').addClass('position_unset');



			}

			

		});



    </script>

</html>