jquery - popup when click link little like stackoverflow inbox in css

Question

I want create a model page which work same like stackoverflow inbox popup. Like in image given below , when we hit the inbox icon looks small box where inside it small loader shows for messages/comments. right? >> After it expand depend on text/tables/messages.

How I add ajax jquery to load any page inside div where the name and id of div="pageaload" and for example the url for load is google.com

speculation request please the page for live mistake see, because my english is bad and might I not able to explain my question and causes it I get thumbs down and bad reputation my profile.

Answer 1

If i understand your post, you can try something like this:

$(function(){
  var prv=$([]);
  $(".top-bar>.m-link").click(function(){
     var dst=$(this).children();
     if(dst.html("<div style='width: 50px; height: 10px'>Loading...</div>").toggle().click(function(ev){ev.stopPropagation();}).is(":visible")){
       dst.load("https://api.github.com");
      }
      if(prv[0]!=dst[0]) prv.hide();
      prv=dst;
  });
});

body{
  position: relative;
  margin: 0;
  padding: 0;
  width: 100%;
  background-color: #f7f7f7;
  box-sizing: border-box;
}
.top-bar{
  position: fixed;
  top:0;
  width:100%;
  height: 22px;
  background-color: #444;
  box-sizing: border-box;
}
.top-bar>.m-link{
  display: inline-block;
  position: relative;
  float:right;
  width:20px;
  height: 20px;
  top: 1px;
  background-color: #fff;
  box-sizing: border-box;
  background-size: 100%;
  margin-left:1px;
  cursor: pointer;
}
#pageaload{
  position: absolute;
  top: 100%;
  right: 0;
  height: 100px;
  width: 420px;
  background-color: #fff;
  border: solid 1px #999;
  box-sizing: border-box;
  display: none;
  border-top-style: none;
  overflow: auto;
  padding: 4px;
  font-size: 9.5pt;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='top-bar'>
  <div class='m-link' style='background-image: url(https://png.icons8.com/ios/50/000000/plus-2-math.png)'>
    <div id='pageaload'></div>
  </div>
  <div class='m-link' style='background-image: url(https://png.icons8.com/ios/50/000000/new-message.png)'>
    <div id='pageaload' style='background-color: #a7a7a7'></div>
  </div>
</div>